@arronqzy/react-view 1.0.12 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-view",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "files": [
     "src",
     "dist",
@@ -30,13 +30,13 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.36.2",
-    "@arronqzy/blueprint-dsl": "1.0.5",
     "@arronqzy/ui": "1.0.5",
-    "@arronqzy/i18n": "0.1.4",
-    "@arronqzy/webllm-assistant": "0.1.6",
-    "@arronqzy/react-blueprint": "1.0.6",
+    "@arronqzy/react-blueprint": "1.0.7",
     "@arronqzy/view-table": "0.1.3",
-    "@arronqzy/rx-store": "1.0.4"
+    "@arronqzy/rx-store": "1.0.4",
+    "@arronqzy/webllm-assistant": "0.1.7",
+    "@arronqzy/blueprint-dsl": "1.0.6",
+    "@arronqzy/i18n": "0.1.5"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",

package/src/panel/ReactViewOnlinePreview.tsx

@@ -35,6 +35,7 @@ import {
   parsePanelLayers,
   resolvePreviewLayerElements,
 } from "./utils/panelStateIO";
+import { applyPreviewSceneFill, readOutputScale } from "./utils/outputScale";
 
 const PREVIEW_BOOT_PHASES: PageLifecyclePhase[] = ["mounted"];
 
@@ -76,6 +77,8 @@ export function ReactViewOnlinePreview({
   >([]);
   const [layoutRevision, setLayoutRevision] = useState(0);
   const [layoutReady, setLayoutReady] = useState(false);
+  const [outputScale, setOutputScale] = useState(() => readOutputScale());
+  const [fillScale, setFillScale] = useState({ scaleX: 1, scaleY: 1 });
 
   const sceneRef = useRef<HTMLDivElement | null>(null);
 
@@ -179,25 +182,38 @@ export function ReactViewOnlinePreview({
 
   const displayElements = useMemo(
     () =>
-      scopedLayerElements.map((el) => ({
-        ...el,
-        x: el.x - sceneBounds.minX,
-        y: el.y - sceneBounds.minY,
-      })),
-    [sceneBounds.minX, sceneBounds.minY, scopedLayerElements]
+      scopedLayerElements.map((el) => {
+        const x = el.x - sceneBounds.minX;
+        const y = el.y - sceneBounds.minY;
+        if (outputScale) return { ...el, x, y };
+        return {
+          ...el,
+          x: x * fillScale.scaleX,
+          y: y * fillScale.scaleY,
+          width: el.width * fillScale.scaleX,
+          height: el.height * fillScale.scaleY,
+        };
+      }),
+    [
+      fillScale.scaleX,
+      fillScale.scaleY,
+      outputScale,
+      sceneBounds.minX,
+      sceneBounds.minY,
+      scopedLayerElements,
+    ]
   );
 
   const applySceneFit = useCallback(() => {
-    const scene = sceneRef.current;
-    if (!scene) return;
-    const vw = window.innerWidth || 1;
-    const vh = window.innerHeight || 1;
-    const sw = Math.max(1, sceneBounds.width);
-    const sh = Math.max(1, sceneBounds.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();
+    setOutputScale(enabled);
+    const fill = applyPreviewSceneFill(
+      sceneRef.current,
+      sceneBounds.width,
+      sceneBounds.height,
+      enabled
+    );
+    setFillScale({ scaleX: fill.scaleX, scaleY: fill.scaleY });
     setLayoutRevision((v) => v + 1);
     notifyPreviewLayoutChanged();
   }, [sceneBounds.height, sceneBounds.width]);
@@ -304,9 +320,16 @@ export function ReactViewOnlinePreview({
           id="preview-scene"
           className="relative shrink-0 origin-top-left"
           style={{
-            width: sceneBounds.width,
-            height: sceneBounds.height,
+            width: outputScale
+              ? sceneBounds.width
+              : sceneBounds.width * fillScale.scaleX,
+            height: outputScale
+              ? sceneBounds.height
+              : sceneBounds.height * fillScale.scaleY,
             transformOrigin: "left top",
+            transform: outputScale
+              ? `scale(${fillScale.scaleX}, ${fillScale.scaleY})`
+              : "none",
           }}
         >
           <ElementsLayer

package/src/panel/ReactViewPanel.tsx

@@ -14,6 +14,7 @@ import { ElementsLayer } from "./components/ElementsLayer";
 import { SelectLayer } from "./components/SelectLayer";
 import { MoveableLayer } from "./components/MoveableLayer";
 import { buildChartOption, CHART_TYPES } from "./utils/chartOptionBuilder";
+import { readOutputScale, writeOutputScale } from "./utils/outputScale";
 import { MaterialSidebar } from "./components/MaterialSidebar";
 import { AssistantChatPanel } from "./ai/AssistantChatPanel";
 import {
@@ -94,6 +95,7 @@ import {
   EmptyTitle,
   Input,
   Menubar,
+  MenubarCheckboxItem,
   MenubarContent,
   MenubarItem,
   MenubarMenu,
@@ -460,6 +462,7 @@ export function ReactViewPanel({
   const [titleIconZoom, setTitleIconZoom] = useState(1.6);
   const [pendingPreviewLayerId, setPendingPreviewLayerId] = useState<string | null>(null);
   const [panelFontSize, setPanelFontSize] = useState<"sm" | "md" | "lg">("md");
+  const [outputScale, setOutputScale] = useState(() => readOutputScale());
   const [blueprintOpen, setBlueprintOpen] = useState(false);
   const [assistantOpen, setAssistantOpen] = useState(false);
   const [blueprintGraph, setBlueprintGraph] = useState(() => BlueprintGraph.empty());
@@ -570,6 +573,10 @@ export function ReactViewPanel({
     }
   }, [panelFontSize]);
 
+  useEffect(() => {
+    writeOutputScale(outputScale);
+  }, [outputScale]);
+
   useEffect(() => {
     try {
       const stored = localStorage.getItem(TITLE_ICON_STORAGE_KEY) ?? "";
@@ -1784,16 +1791,49 @@ export function ReactViewPanel({
           });
         }
         var scene = document.getElementById("preview-scene");
+        var root = document.getElementById("preview-root");
+        var outputScale = ${outputScale ? "true" : "false"};
+        function rememberBox(node) {
+          if (node.dataset.origLeft != null) return;
+          node.dataset.origLeft = String(parseFloat(node.style.left) || 0);
+          node.dataset.origTop = String(parseFloat(node.style.top) || 0);
+          node.dataset.origWidth = String(parseFloat(node.style.width) || node.offsetWidth || 0);
+          node.dataset.origHeight = String(parseFloat(node.style.height) || node.offsetHeight || 0);
+        }
         function fitScene() {
           if (!scene) return;
           var vw = window.innerWidth || 1;
           var vh = window.innerHeight || 1;
           var sw = ${sceneWidth} || 1;
           var sh = ${sceneHeight} || 1;
-          // 铺满预览窗口：宽高分别缩放，保证内容贴住四边
           var scaleX = vw / sw;
           var scaleY = vh / sh;
-          scene.style.transform = "translate(0px,0px) scale(" + scaleX + "," + scaleY + ")";
+          if (root) root.style.overflow = "hidden";
+          var nodes = scene.querySelectorAll("[data-element-id]");
+          if (outputScale) {
+            scene.style.width = sw + "px";
+            scene.style.height = sh + "px";
+            scene.style.transform = "translate(0px,0px) scale(" + scaleX + "," + scaleY + ")";
+            nodes.forEach(function (node) {
+              rememberBox(node);
+              node.style.left = node.dataset.origLeft + "px";
+              node.style.top = node.dataset.origTop + "px";
+              node.style.width = node.dataset.origWidth + "px";
+              node.style.height = node.dataset.origHeight + "px";
+            });
+            return;
+          }
+          // 块仍按视口撑满，但不对整棵内容做 transform，字体保持原尺寸
+          scene.style.width = vw + "px";
+          scene.style.height = vh + "px";
+          scene.style.transform = "none";
+          nodes.forEach(function (node) {
+            rememberBox(node);
+            node.style.left = (Number(node.dataset.origLeft) * scaleX) + "px";
+            node.style.top = (Number(node.dataset.origTop) * scaleY) + "px";
+            node.style.width = (Number(node.dataset.origWidth) * scaleX) + "px";
+            node.style.height = (Number(node.dataset.origHeight) * scaleY) + "px";
+          });
         }
         fitScene();
         window.addEventListener("resize", fitScene);
@@ -2013,6 +2053,14 @@ export function ReactViewPanel({
                 <MenubarRadioItem value="zh-CN">{t("panel.theme.zhCN")}</MenubarRadioItem>
                 <MenubarRadioItem value="en-US">{t("panel.theme.enUS")}</MenubarRadioItem>
               </MenubarRadioGroup>
+              <MenubarSeparator />
+              <MenubarCheckboxItem
+                checked={outputScale}
+                onCheckedChange={(checked) => setOutputScale(checked === true)}
+                title={t("panel.menubar.outputScaleHint")}
+              >
+                {t("panel.menubar.outputScale")}
+              </MenubarCheckboxItem>
             </MenubarContent>
           </MenubarMenu>
         </Menubar>
@@ -3176,6 +3224,8 @@ export function ReactViewPanel({
               configFocus={sidebarConfigFocus}
               executionLog={executionLogView}
               selectedBlueprintNode={selectedBlueprintNode}
+              blueprintGraphNodes={blueprintGraph.document.nodes}
+              blueprintGraphEdges={blueprintGraph.document.edges}
               allowFalseSignalPropagation={
                 blueprintGraph.document.allowFalseSignalPropagation ?? false
               }

package/src/panel/components/PanelConfigSidebar.tsx

@@ -104,8 +104,8 @@ export function PanelConfigSidebar({
     "scrollbar-thin [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-muted/40 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/80 [&::-webkit-scrollbar-thumb]:hover:bg-border";
   const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({
     nodeInfo: true,
-    styleBackground: true,
-    styleBorder: true,
+    styleBackground: false,
+    styleBorder: false,
     chartBasic: true,
     chartAdvanced: false,
     chartAdvancedHighFreq: true,
@@ -421,9 +421,21 @@ export function PanelConfigSidebar({
 
   useEffect(() => {
     return subscribeRevealPanelConfig((detail) => {
-      for (const section of detail.sections) {
-        setSectionExpanded(section, true);
-      }
+      setExpandedSections((prev) => {
+        const next = { ...prev };
+        for (const section of detail.sections) next[section] = true;
+        next.nodeMore = true;
+        next.styleBgLayout = true;
+        next.chartDisplayMore = true;
+        next.chartTooltip = true;
+        next.chartAxes = true;
+        next.textInputAbility = true;
+        next.audioDisplayStyle = true;
+        next.geometryCanvasScript = true;
+        next.geometrySketch = true;
+        next.referenceCopyStrategy = true;
+        return next;
+      });
       window.requestAnimationFrame(() => {
         const field = detail.fields[0];
         if (field) highlightConfigField(field);
@@ -475,16 +487,48 @@ export function PanelConfigSidebar({
   const renderFieldGroup = (
     title: string,
     children: React.ReactNode,
-    hint?: React.ReactNode
-  ) => (
-    <div className="space-y-2.5 rounded-lg border border-border/55 bg-background/80 p-2.5">
-      <div className="flex items-center gap-1">
+    hint?: React.ReactNode,
+    options?: { groupKey?: string; defaultOpen?: boolean }
+  ) => {
+    const groupKey = options?.groupKey;
+    const defaultOpen = options?.defaultOpen ?? true;
+    const header = (
+      <>
         <div className="text-[11px] font-semibold text-muted-foreground">{title}</div>
         {hint ? <ConfigHintIcon label={title}>{hint}</ConfigHintIcon> : null}
-      </div>
-      {children}
-    </div>
-  );
+      </>
+    );
+    if (!groupKey) {
+      return (
+        <div className="space-y-2.5 rounded-lg border border-border/55 bg-background/80 p-2.5">
+          <div className="flex items-center gap-1">{header}</div>
+          {children}
+        </div>
+      );
+    }
+    const open = hasSearch ? true : isSectionExpanded(groupKey, defaultOpen);
+    return (
+      <Collapsible
+        open={open}
+        onOpenChange={(next) => setSectionExpanded(groupKey, next)}
+        className="space-y-2.5 rounded-lg border border-border/55 bg-background/80 p-2.5"
+      >
+        <div className="flex items-center gap-1.5">
+          <CollapsibleTrigger asChild>
+            <button
+              type="button"
+              className="flex h-5 w-5 items-center justify-center rounded text-[11px] hover:bg-accent"
+              aria-label={open ? t("panel.config.collapseGroup", { title }) : t("panel.config.expandGroup", { title })}
+            >
+              {open ? "▾" : "▸"}
+            </button>
+          </CollapsibleTrigger>
+          {header}
+        </div>
+        <CollapsibleContent className="space-y-2.5">{children}</CollapsibleContent>
+      </Collapsible>
+    );
+  };
   const isNodeCardExpanded = useCallback(
     (id: string) => expandedNodeCards[id] ?? true,
     [expandedNodeCards]
@@ -1369,15 +1413,19 @@ export function PanelConfigSidebar({
                             className="h-7"
                             type="number"
                             min={1}
-                            value={el.chart?.barWidth ?? 24}
-                            onChange={(e) =>
+                            placeholder={t("panel.config.barWidthAuto")}
+                            value={el.chart?.barWidth ?? ""}
+                            onChange={(e) => {
+                              const raw = e.target.value.trim();
                               updateElement(el.id, {
                                 chart: {
                                   ...(el.chart ?? {}),
-                                  barWidth: Math.max(1, Number(e.target.value) || 1),
+                                  barWidth: raw
+                                    ? Math.max(1, Number(raw) || 1)
+                                    : undefined,
                                 },
-                              })
-                            }
+                              });
+                            }}
                           />
                         </label>
                       ) : null}
@@ -1879,21 +1927,6 @@ export function PanelConfigSidebar({
               {readonlyReason}
             </div>
           ) : null}
-          <div className="rounded-lg border border-border/60 bg-card/80 px-2.5 py-2 text-xs">
-            <label className="flex items-center gap-2">
-              <Checkbox
-                checked={selectedElement.locked === true}
-                disabled={!canToggleNodeLock}
-                className="h-4 w-4 border-2 border-foreground/80 bg-background ring-1 ring-foreground/40 data-[state=checked]:border-primary data-[state=checked]:ring-primary/40"
-                onCheckedChange={(checked) =>
-                  updateElement(selectedElement.id, {
-                    locked: checked === true,
-                  })
-                }
-              />
-              <span>{t("panel.config.lockNode")}</span>
-            </label>
-          </div>
           <fieldset disabled={!isNodeEditable} className={!isNodeEditable ? "opacity-60" : ""}>
             <div className="space-y-3.5 text-xs">
               {renderSection(
@@ -1913,7 +1946,7 @@ export function PanelConfigSidebar({
                   className="h-7"
                 />
               </label>
-              <div className="grid grid-cols-3 gap-2">
+              <div className="grid grid-cols-2 gap-2">
                 <label className="block space-y-1" data-config-field="x">
                   <div>X</div>
                   <Input
@@ -1941,20 +1974,7 @@ export function PanelConfigSidebar({
                   />
                 </label>
               </div>
-              <div className="grid grid-cols-3 gap-2">
-                <label className="block space-y-1" data-config-field="rotate">
-                  <div>{t("panel.config.rotate")}</div>
-                  <Input
-                    type="number"
-                    value={selectedElement.rotate ?? 0}
-                    onChange={(e) =>
-                      updateElement(selectedElement.id, {
-                        rotate: Number(e.target.value) || 0,
-                      })
-                    }
-                    className="h-7"
-                  />
-                </label>
+              <div className="grid grid-cols-2 gap-2">
                 <label className="block space-y-1" data-config-field="width">
                   <div>{t("panel.config.width")}</div>
                   <Input
@@ -1985,6 +2005,24 @@ export function PanelConfigSidebar({
                   />
                 </label>
               </div>
+              {renderFieldGroup(
+                t("panel.config.groupNodeMore"),
+                <>
+              <div className="grid grid-cols-2 gap-2">
+                <label className="block space-y-1" data-config-field="rotate">
+                  <div>{t("panel.config.rotate")}</div>
+                  <Input
+                    type="number"
+                    value={selectedElement.rotate ?? 0}
+                    onChange={(e) =>
+                      updateElement(selectedElement.id, {
+                        rotate: Number(e.target.value) || 0,
+                      })
+                    }
+                    className="h-7"
+                  />
+                </label>
+              </div>
               <div className="space-y-1.5">
                 <div className="text-[11px] text-muted-foreground">{t("panel.config.nodeZOrder")}</div>
                 <div className="text-[11px] text-muted-foreground/90">
@@ -2023,205 +2061,177 @@ export function PanelConfigSidebar({
               </div>
               <div className="truncate text-muted-foreground">ID: {selectedElement.id}</div>
               <div className="text-muted-foreground">{t("panel.config.type")}: {selectedElement.materialType ?? selectedElement.id}</div>
+                </>,
+                undefined,
+                { groupKey: "nodeMore", defaultOpen: false }
+              )}
             </>,
             true,
-            [t("panel.config.name"), "id", t("panel.config.type"), t("panel.layers.lockShort"), "locked", "name"]
+            [t("panel.config.name"), "id", t("panel.config.type"), t("panel.config.rotate"), t("panel.config.nodeZOrder"), t("panel.layers.lockShort"), "locked", "name"]
           )}
+            </div>
+          </fieldset>
+          <div className="rounded-lg border border-border/60 bg-card/80 px-2.5 py-2 text-xs">
+            <label className="flex items-center gap-2">
+              <Checkbox
+                checked={selectedElement.locked === true}
+                disabled={!canToggleNodeLock}
+                className="h-4 w-4 border-2 border-foreground/80 bg-background ring-1 ring-foreground/40 data-[state=checked]:border-primary data-[state=checked]:ring-primary/40"
+                onCheckedChange={(checked) =>
+                  updateElement(selectedElement.id, {
+                    locked: checked === true,
+                  })
+                }
+              />
+              <span>{t("panel.config.lockNode")}</span>
+            </label>
+          </div>
+          <fieldset disabled={!isNodeEditable} className={!isNodeEditable ? "opacity-60" : ""}>
+            <div className="space-y-3.5 text-xs">
 
-          {renderSection(
-            "styleBackground",
-            t("panel.config.sectionStyleBackground"),
+          {isChartElement ? (
             <>
-              {renderFieldGroup(
-                t("panel.config.groupBgFill"),
+              {renderSection(
+                "chartBasic",
+                t("panel.config.sectionChartBasic"),
                 <>
-                  {renderColorField(
-                    t("panel.config.backgroundColor"),
-                    selectedElement.style?.backgroundColor ?? "",
-                    (next) => updateSelectedStyle({ backgroundColor: next || undefined })
+                  {renderFieldGroup(
+                    t("panel.config.groupBasicDisplay"),
+                    <>
+                      <label className="block space-y-1.5" data-config-field="chart.title">
+                        <div>{t("panel.config.title")}</div>
+                        <Input
+                          value={selectedElement.chart?.title ?? ""}
+                          onChange={(e) => updateSelectedChart({ title: e.target.value })}
+                          className="h-7"
+                        />
+                      </label>
+
+                      {renderColorField(
+                        t("panel.config.primaryColor"),
+                        selectedElement.chart?.color ?? "#3b82f6",
+                        (next) => updateSelectedChart({ color: next || "#3b82f6" })
+                      )}
+                    </>
                   )}
-                  <label className="block space-y-1">
-                    <div>{t("panel.config.backgroundImage")}</div>
-                    <Input
-                      value={selectedElement.style?.backgroundImage ?? ""}
-                      onChange={(e) => updateSelectedStyle({ backgroundImage: e.target.value || undefined })}
-                      placeholder='url("https://...") / linear-gradient(...)'
-                      className="h-7"
-                    />
-                  </label>
-                  <div className="flex items-center gap-2">
-                    <label className="inline-flex cursor-pointer items-center rounded border border-border px-2 py-1 text-[11px] hover:bg-accent">
-                      {t("panel.config.uploadImage")}
-                      <Input
-                        type="file"
-                        accept="image/*"
-                        className="hidden"
-                        onChange={async (e) => {
-                          const file = e.target.files?.[0];
-                          e.currentTarget.value = "";
-                          if (!file) return;
-                          await handleUploadBackgroundImage(file);
-                        }}
-                      />
-                    </label>
-                    {uploadStatus ? (
-                      <span className="text-[11px] text-muted-foreground">{uploadStatus}</span>
-                    ) : null}
-                  </div>
-                </>
-              )}
-              {renderFieldGroup(
-                t("panel.config.groupBgLayout"),
-                <div className="grid grid-cols-2 gap-2">
-                  <label className="block space-y-1">
-                    <div>{t("panel.config.backgroundSize")}</div>
-                    <Select
-                      value={selectedElement.style?.backgroundSize ?? "__none__"}
-                      onValueChange={(value) =>
-                        updateSelectedStyle({
-                          backgroundSize: value === "__none__" ? undefined : value,
-                        })
-                      }
-                    >
-                      <SelectTrigger className="h-7">
-                        <SelectValue placeholder={t("panel.config.selectBackgroundSize")} />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="__none__">{t("common.default")}</SelectItem>
-                        <SelectItem value="cover">cover</SelectItem>
-                        <SelectItem value="contain">contain</SelectItem>
-                        <SelectItem value="100% 100%">100% 100%</SelectItem>
-                        <SelectItem value="auto">auto</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </label>
-                  <label className="block space-y-1">
-                    <div>{t("panel.config.backgroundPosition")}</div>
-                    <Select
-                      value={selectedElement.style?.backgroundPosition ?? "__none__"}
-                      onValueChange={(value) =>
-                        updateSelectedStyle({
-                          backgroundPosition: value === "__none__" ? undefined : value,
-                        })
-                      }
-                    >
-                      <SelectTrigger className="h-7">
-                        <SelectValue placeholder={t("panel.config.selectBackgroundPosition")} />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="__none__">{t("common.default")}</SelectItem>
-                        <SelectItem value="center">center</SelectItem>
-                        <SelectItem value="top">top</SelectItem>
-                        <SelectItem value="bottom">bottom</SelectItem>
-                        <SelectItem value="left">left</SelectItem>
-                        <SelectItem value="right">right</SelectItem>
-                        <SelectItem value="top left">top left</SelectItem>
-                        <SelectItem value="top right">top right</SelectItem>
-                        <SelectItem value="bottom left">bottom left</SelectItem>
-                        <SelectItem value="bottom right">bottom right</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </label>
-                </div>
-              )}
-            </>,
-            true,
-            [t("panel.config.backgroundColor"), t("panel.config.backgroundImage"), "background", "backgroundSize", "backgroundPosition", t("panel.config.searchKwLayout")]
-          )}
+                  {renderFieldGroup(
+                    t("panel.config.groupData"),
+                    <>
+                      <label className="block space-y-1">
+                        <div>{t("panel.config.labelsCsv")}</div>
+                        <Input
+                          value={getChartLabelsDisplayText(selectedElement.chart)}
+                          onChange={(e) =>
+                            updateSelectedChart({
+                              labelsText: e.target.value,
+                            })
+                          }
+                          className="h-7"
+                        />
+                      </label>
 
-          {renderSection(
-            "styleBorder",
-            t("panel.config.sectionStyleBorder"),
-            <>
-              {renderFieldGroup(
-                t("panel.config.groupBorderGeometry"),
-                <div className="grid grid-cols-2 gap-2">
-                  <label className="block space-y-1">
-                    <div>{t("panel.config.borderWidth")}</div>
-                    <Input
-                      type="number"
-                      min={0}
-                      value={selectedElement.style?.borderWidth ?? 0}
-                      onChange={(e) =>
-                        updateSelectedStyle({ borderWidth: Math.max(0, Number(e.target.value) || 0) })
-                      }
-                      className="h-7"
-                    />
-                  </label>
-                  <label className="block space-y-1">
-                    <div>{t("panel.config.borderRadius")}</div>
-                    <Input
-                      type="number"
-                      min={0}
-                      value={selectedElement.style?.borderRadius ?? 0}
-                      onChange={(e) =>
-                        updateSelectedStyle({ borderRadius: Math.max(0, Number(e.target.value) || 0) })
-                      }
-                      className="h-7"
-                    />
-                  </label>
-                </div>
-              )}
-              {renderFieldGroup(
-                t("panel.config.groupBorderVisual"),
-                <div className="grid grid-cols-2 gap-2">
-                  <label className="block space-y-1">
-                    <div>{t("panel.config.borderStyle")}</div>
-                    <Select
-                      value={selectedElement.style?.borderStyle ?? "solid"}
-                      onValueChange={(value) =>
-                        updateSelectedStyle({
-                          borderStyle: value as NonNullable<PanelElementStyle["borderStyle"]>,
-                        })
-                      }
-                    >
-                      <SelectTrigger className="h-7">
-                        <SelectValue placeholder={t("panel.config.selectBorderStyle")} />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="none">none</SelectItem>
-                        <SelectItem value="solid">solid</SelectItem>
-                        <SelectItem value="dashed">dashed</SelectItem>
-                        <SelectItem value="dotted">dotted</SelectItem>
-                        <SelectItem value="double">double</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </label>
-                  {renderColorField(
-                    t("panel.config.borderColor"),
-                    selectedElement.style?.borderColor ?? "",
-                    (next) => updateSelectedStyle({ borderColor: next || undefined })
-                  )}
-                </div>
-              )}
-            </>,
-            true,
-            [t("panel.config.searchKwBorder"), "border", t("panel.config.searchKwWidth"), t("panel.config.searchKwRadius"), t("panel.config.color"), t("panel.config.searchKwStyle")]
-          )}
-
-          {isChartElement ? (
-            <>
-              {renderSection(
-                "chartBasic",
-                t("panel.config.sectionChartBasic"),
-                <>
-                  {renderFieldGroup(
-                    t("panel.config.groupBasicDisplay"),
-                    <>
-                      <label className="block space-y-1.5" data-config-field="chart.title">
-                        <div>{t("panel.config.title")}</div>
+                      <label className="block space-y-1">
+                        <div>{t("panel.config.valuesCsv")}</div>
                         <Input
-                          value={selectedElement.chart?.title ?? ""}
-                          onChange={(e) => updateSelectedChart({ title: e.target.value })}
+                          value={getChartValuesDisplayText(selectedElement.chart)}
+                          onChange={(e) =>
+                            updateSelectedChart({
+                              valuesText: e.target.value,
+                            })
+                          }
                           className="h-7"
                         />
                       </label>
+                    </>
+                  )}
 
-                      {renderColorField(
-                        t("panel.config.primaryColor"),
-                        selectedElement.chart?.color ?? "#3b82f6",
-                        (next) => updateSelectedChart({ color: next || "#3b82f6" })
-                      )}
+                  {selectedChartType === "bar" ||
+                  selectedChartType === "line" ||
+                  selectedChartType === "area" ||
+                  selectedChartType === "pie" ? (
+                    renderFieldGroup(
+                      t("panel.config.groupSeries"),
+                      <>
+                        {selectedChartType === "bar" ? (
+                          <label className="block space-y-1">
+                            <div>{t("panel.config.barWidthPx")}</div>
+                            <Input
+                              type="number"
+                              min={1}
+                              placeholder={t("panel.config.barWidthAuto")}
+                              value={selectedElement.chart?.barWidth ?? ""}
+                              onChange={(e) => {
+                                const raw = e.target.value.trim();
+                                updateSelectedChart({
+                                  barWidth: raw
+                                    ? Math.max(1, Number(raw) || 1)
+                                    : undefined,
+                                });
+                              }}
+                              className="h-7"
+                            />
+                          </label>
+                        ) : null}
+
+                        {selectedChartType === "line" || selectedChartType === "area" ? (
+                          <label className="flex items-center gap-2">
+                            <Checkbox
+                              checked={selectedElement.chart?.smooth ?? true}
+                              className="h-4 w-4 border-2 border-foreground/80 bg-background ring-1 ring-foreground/40 data-[state=checked]:border-primary data-[state=checked]:ring-primary/40"
+                              onCheckedChange={(checked) =>
+                                updateSelectedChart({ smooth: checked === true })
+                              }
+                            />
+                            <span>{t("panel.config.smooth")}</span>
+                          </label>
+                        ) : null}
+
+                        {selectedChartType === "pie" ? (
+                          <div className="grid grid-cols-2 gap-2">
+                            <label className="block space-y-1">
+                              <div>{t("panel.config.pieInnerRadiusPct")}</div>
+                              <Input
+                                type="number"
+                                min={0}
+                                max={99}
+                                value={selectedElement.chart?.pieInnerRadius ?? 30}
+                                onChange={(e) =>
+                                  updateSelectedChart({
+                                    pieInnerRadius: Math.max(
+                                      0,
+                                      Math.min(99, Number(e.target.value) || 0)
+                                    ),
+                                  })
+                                }
+                                className="h-7"
+                              />
+                            </label>
+                            <label className="block space-y-1">
+                              <div>{t("panel.config.pieOuterRadiusPct")}</div>
+                              <Input
+                                type="number"
+                                min={1}
+                                max={100}
+                                value={selectedElement.chart?.pieOuterRadius ?? 65}
+                                onChange={(e) =>
+                                  updateSelectedChart({
+                                    pieOuterRadius: Math.max(
+                                      1,
+                                      Math.min(100, Number(e.target.value) || 1)
+                                    ),
+                                  })
+                                }
+                                className="h-7"
+                              />
+                            </label>
+                          </div>
+                        ) : null}
+                      </>
+                    )
+                  ) : null}
+                  {renderFieldGroup(
+                    t("panel.config.groupChartDisplayMore"),
+                    <>
                       <label className="flex items-center gap-2">
                         <Checkbox
                           checked={selectedElement.chart?.colorMode === "gradient"}
@@ -2304,7 +2314,9 @@ export function PanelConfigSidebar({
                           </SelectContent>
                         </Select>
                       </label>
-                    </>
+                    </>,
+                    undefined,
+                    { groupKey: "chartDisplayMore", defaultOpen: false }
                   )}
                   {renderFieldGroup(
                     t("panel.config.groupTooltip"),
@@ -2361,39 +2373,10 @@ export function PanelConfigSidebar({
                           className="h-7"
                         />
                       </label>
-                    </>
+                    </>,
+                    undefined,
+                    { groupKey: "chartTooltip", defaultOpen: false }
                   )}
-                  {renderFieldGroup(
-                    t("panel.config.groupData"),
-                    <>
-                      <label className="block space-y-1">
-                        <div>{t("panel.config.labelsCsv")}</div>
-                        <Input
-                          value={getChartLabelsDisplayText(selectedElement.chart)}
-                          onChange={(e) =>
-                            updateSelectedChart({
-                              labelsText: e.target.value,
-                            })
-                          }
-                          className="h-7"
-                        />
-                      </label>
-
-                      <label className="block space-y-1">
-                        <div>{t("panel.config.valuesCsv")}</div>
-                        <Input
-                          value={getChartValuesDisplayText(selectedElement.chart)}
-                          onChange={(e) =>
-                            updateSelectedChart({
-                              valuesText: e.target.value,
-                            })
-                          }
-                          className="h-7"
-                        />
-                      </label>
-                    </>
-                  )}
-
                   {selectedChartType === "bar" ||
                   selectedChartType === "line" ||
                   selectedChartType === "area" ||
@@ -2555,88 +2538,12 @@ export function PanelConfigSidebar({
                           <span>{t("panel.config.yAxisLabelAutoEllipsis")}</span>
                         </label>
                       </div>
-                      </>
+                      </>,
+                      undefined,
+                      { groupKey: "chartAxes", defaultOpen: false }
                     )
                   ) : null}
 
-                  {selectedChartType === "bar" ||
-                  selectedChartType === "line" ||
-                  selectedChartType === "area" ||
-                  selectedChartType === "pie" ? (
-                    renderFieldGroup(
-                      t("panel.config.groupSeries"),
-                      <>
-                        {selectedChartType === "bar" ? (
-                          <label className="block space-y-1">
-                            <div>{t("panel.config.barWidthPx")}</div>
-                            <Input
-                              type="number"
-                              min={1}
-                              value={selectedElement.chart?.barWidth ?? 24}
-                              onChange={(e) =>
-                                updateSelectedChart({ barWidth: Math.max(1, Number(e.target.value) || 1) })
-                              }
-                              className="h-7"
-                            />
-                          </label>
-                        ) : null}
-
-                        {selectedChartType === "line" || selectedChartType === "area" ? (
-                          <label className="flex items-center gap-2">
-                            <Checkbox
-                              checked={selectedElement.chart?.smooth ?? true}
-                              className="h-4 w-4 border-2 border-foreground/80 bg-background ring-1 ring-foreground/40 data-[state=checked]:border-primary data-[state=checked]:ring-primary/40"
-                              onCheckedChange={(checked) =>
-                                updateSelectedChart({ smooth: checked === true })
-                              }
-                            />
-                            <span>{t("panel.config.smooth")}</span>
-                          </label>
-                        ) : null}
-
-                        {selectedChartType === "pie" ? (
-                          <div className="grid grid-cols-2 gap-2">
-                            <label className="block space-y-1">
-                              <div>{t("panel.config.pieInnerRadiusPct")}</div>
-                              <Input
-                                type="number"
-                                min={0}
-                                max={99}
-                                value={selectedElement.chart?.pieInnerRadius ?? 30}
-                                onChange={(e) =>
-                                  updateSelectedChart({
-                                    pieInnerRadius: Math.max(
-                                      0,
-                                      Math.min(99, Number(e.target.value) || 0)
-                                    ),
-                                  })
-                                }
-                                className="h-7"
-                              />
-                            </label>
-                            <label className="block space-y-1">
-                              <div>{t("panel.config.pieOuterRadiusPct")}</div>
-                              <Input
-                                type="number"
-                                min={1}
-                                max={100}
-                                value={selectedElement.chart?.pieOuterRadius ?? 65}
-                                onChange={(e) =>
-                                  updateSelectedChart({
-                                    pieOuterRadius: Math.max(
-                                      1,
-                                      Math.min(100, Number(e.target.value) || 1)
-                                    ),
-                                  })
-                                }
-                                className="h-7"
-                              />
-                            </label>
-                          </div>
-                        ) : null}
-                      </>
-                    )
-                  ) : null}
                 </>,
                 true,
                 [
@@ -3086,7 +2993,9 @@ export function PanelConfigSidebar({
                       }
                     />
                     <span>{t("panel.config.allowCanvasInput")}</span>
-                  </label>
+                  </label>,
+                  undefined,
+                  { groupKey: "textInputAbility", defaultOpen: false }
                 )}
               </>,
               true,
@@ -3269,7 +3178,9 @@ export function PanelConfigSidebar({
                         {t("panel.config.audioPosterHint")}
                       </ConfigHintIcon>
                     </div>
-                  </>
+                  </>,
+                  undefined,
+                  { groupKey: "audioDisplayStyle", defaultOpen: false }
                 )}
               </>,
               true,
@@ -3442,7 +3353,8 @@ export function PanelConfigSidebar({
                   </>,
                   <>
                     {t("panel.config.canvasScriptHint")}
-                  </>
+                  </>,
+                  { groupKey: "geometryCanvasScript", defaultOpen: false }
                 )}
                 {renderFieldGroup(
                   t("panel.config.groupSketchOverlay"),
@@ -3539,7 +3451,9 @@ export function PanelConfigSidebar({
                         {t("panel.config.clearSketch")}
                       </button>
                     </div>
-                  </>
+                  </>,
+                  undefined,
+                  { groupKey: "geometrySketch", defaultOpen: false }
                 )}
               </>,
               true,
@@ -3699,17 +3613,193 @@ export function PanelConfigSidebar({
                   </>,
                   <>
                     {t("panel.config.copyStrategyHint")}
-                  </>
+                  </>,
+                  { groupKey: "referenceCopyStrategy", defaultOpen: false }
                 )}
               </>,
               true,
               [t("panel.config.searchKwRef"), "ref", t("panel.config.layer"), t("panel.material.shallowCopy"), t("panel.material.deepCopy"), "snapshot"]
             )
-          ) : (
+          ) : selectedElement.materialType === "image" ? null : (
             <div className="text-xs leading-6 text-muted-foreground">
               {t("panel.config.notChartType")}
             </div>
           )}
+          {renderSection(
+            "styleBackground",
+            t("panel.config.sectionStyleBackground"),
+            <>
+              {renderFieldGroup(
+                t("panel.config.groupBgFill"),
+                <>
+                  {renderColorField(
+                    t("panel.config.backgroundColor"),
+                    selectedElement.style?.backgroundColor ?? "",
+                    (next) => updateSelectedStyle({ backgroundColor: next || undefined })
+                  )}
+                </>
+              )}
+              {renderFieldGroup(
+                t("panel.config.groupBgLayout"),
+                <>
+                  <label className="block space-y-1">
+                    <div>{t("panel.config.backgroundImage")}</div>
+                    <Input
+                      value={selectedElement.style?.backgroundImage ?? ""}
+                      onChange={(e) => updateSelectedStyle({ backgroundImage: e.target.value || undefined })}
+                      placeholder='url("https://...") / linear-gradient(...)'
+                      className="h-7"
+                    />
+                  </label>
+                  <div className="flex items-center gap-2">
+                    <label className="inline-flex cursor-pointer items-center rounded border border-border px-2 py-1 text-[11px] hover:bg-accent">
+                      {t("panel.config.uploadImage")}
+                      <Input
+                        type="file"
+                        accept="image/*"
+                        className="hidden"
+                        onChange={async (e) => {
+                          const file = e.target.files?.[0];
+                          e.currentTarget.value = "";
+                          if (!file) return;
+                          await handleUploadBackgroundImage(file);
+                        }}
+                      />
+                    </label>
+                    {uploadStatus ? (
+                      <span className="text-[11px] text-muted-foreground">{uploadStatus}</span>
+                    ) : null}
+                  </div>
+                  <div className="grid grid-cols-2 gap-2">
+                  <label className="block space-y-1">
+                    <div>{t("panel.config.backgroundSize")}</div>
+                    <Select
+                      value={selectedElement.style?.backgroundSize ?? "__none__"}
+                      onValueChange={(value) =>
+                        updateSelectedStyle({
+                          backgroundSize: value === "__none__" ? undefined : value,
+                        })
+                      }
+                    >
+                      <SelectTrigger className="h-7">
+                        <SelectValue placeholder={t("panel.config.selectBackgroundSize")} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">{t("common.default")}</SelectItem>
+                        <SelectItem value="cover">cover</SelectItem>
+                        <SelectItem value="contain">contain</SelectItem>
+                        <SelectItem value="100% 100%">100% 100%</SelectItem>
+                        <SelectItem value="auto">auto</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </label>
+                  <label className="block space-y-1">
+                    <div>{t("panel.config.backgroundPosition")}</div>
+                    <Select
+                      value={selectedElement.style?.backgroundPosition ?? "__none__"}
+                      onValueChange={(value) =>
+                        updateSelectedStyle({
+                          backgroundPosition: value === "__none__" ? undefined : value,
+                        })
+                      }
+                    >
+                      <SelectTrigger className="h-7">
+                        <SelectValue placeholder={t("panel.config.selectBackgroundPosition")} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">{t("common.default")}</SelectItem>
+                        <SelectItem value="center">center</SelectItem>
+                        <SelectItem value="top">top</SelectItem>
+                        <SelectItem value="bottom">bottom</SelectItem>
+                        <SelectItem value="left">left</SelectItem>
+                        <SelectItem value="right">right</SelectItem>
+                        <SelectItem value="top left">top left</SelectItem>
+                        <SelectItem value="top right">top right</SelectItem>
+                        <SelectItem value="bottom left">bottom left</SelectItem>
+                        <SelectItem value="bottom right">bottom right</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </label>
+                </div>
+                </>,
+                undefined,
+                { groupKey: "styleBgLayout", defaultOpen: false }
+              )}
+            </>,
+            false,
+            [t("panel.config.backgroundColor"), t("panel.config.backgroundImage"), "background", "backgroundSize", "backgroundPosition", t("panel.config.searchKwLayout")]
+          )}
+
+          {renderSection(
+            "styleBorder",
+            t("panel.config.sectionStyleBorder"),
+            <>
+              {renderFieldGroup(
+                t("panel.config.groupBorderGeometry"),
+                <div className="grid grid-cols-2 gap-2">
+                  <label className="block space-y-1">
+                    <div>{t("panel.config.borderWidth")}</div>
+                    <Input
+                      type="number"
+                      min={0}
+                      value={selectedElement.style?.borderWidth ?? 0}
+                      onChange={(e) =>
+                        updateSelectedStyle({ borderWidth: Math.max(0, Number(e.target.value) || 0) })
+                      }
+                      className="h-7"
+                    />
+                  </label>
+                  <label className="block space-y-1">
+                    <div>{t("panel.config.borderRadius")}</div>
+                    <Input
+                      type="number"
+                      min={0}
+                      value={selectedElement.style?.borderRadius ?? 0}
+                      onChange={(e) =>
+                        updateSelectedStyle({ borderRadius: Math.max(0, Number(e.target.value) || 0) })
+                      }
+                      className="h-7"
+                    />
+                  </label>
+                </div>
+              )}
+              {renderFieldGroup(
+                t("panel.config.groupBorderVisual"),
+                <div className="grid grid-cols-2 gap-2">
+                  <label className="block space-y-1">
+                    <div>{t("panel.config.borderStyle")}</div>
+                    <Select
+                      value={selectedElement.style?.borderStyle ?? "solid"}
+                      onValueChange={(value) =>
+                        updateSelectedStyle({
+                          borderStyle: value as NonNullable<PanelElementStyle["borderStyle"]>,
+                        })
+                      }
+                    >
+                      <SelectTrigger className="h-7">
+                        <SelectValue placeholder={t("panel.config.selectBorderStyle")} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">none</SelectItem>
+                        <SelectItem value="solid">solid</SelectItem>
+                        <SelectItem value="dashed">dashed</SelectItem>
+                        <SelectItem value="dotted">dotted</SelectItem>
+                        <SelectItem value="double">double</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </label>
+                  {renderColorField(
+                    t("panel.config.borderColor"),
+                    selectedElement.style?.borderColor ?? "",
+                    (next) => updateSelectedStyle({ borderColor: next || undefined })
+                  )}
+                </div>
+              )}
+            </>,
+            false,
+            [t("panel.config.searchKwBorder"), "border", t("panel.config.searchKwWidth"), t("panel.config.searchKwRadius"), t("panel.config.color"), t("panel.config.searchKwStyle")]
+          )}
+
           {hasSearch && renderedSectionCount === 0 ? (
             <div className="rounded border border-border/60 bg-background px-2 py-1.5 text-[11px] text-muted-foreground">
               {t("panel.config.noMatch")}

package/src/panel/components/WorkspaceConfigSidebar.tsx

@@ -4,6 +4,7 @@ import { useI18n } from "@arronqzy/i18n/react";
 import {
   BlueprintExecutionLogPanel,
   BlueprintNodeConfigSidebar,
+  type BlueprintGraphEdge,
   type BlueprintGraphNode,
   type ExecutionLogSettings,
   type ExecutionTraceEntry,
@@ -41,6 +42,8 @@ export type WorkspaceConfigSidebarProps = Omit<
   configFocus: WorkspaceConfigFocus;
   executionLog?: BlueprintExecutionLogViewProps;
   selectedBlueprintNode: BlueprintGraphNode | null;
+  blueprintGraphNodes?: BlueprintGraphNode[];
+  blueprintGraphEdges?: BlueprintGraphEdge[];
   allowFalseSignalPropagation?: boolean;
   onUpdateAllowFalseSignalPropagation?: (value: boolean) => void;
   onUpdateBlueprintNode: (
@@ -74,6 +77,8 @@ export function WorkspaceConfigSidebar({
   configFocus,
   executionLog,
   selectedBlueprintNode,
+  blueprintGraphNodes = [],
+  blueprintGraphEdges = [],
   allowFalseSignalPropagation = false,
   onUpdateAllowFalseSignalPropagation,
   onUpdateBlueprintNode,
@@ -151,6 +156,9 @@ export function WorkspaceConfigSidebar({
   return (
     <BlueprintNodeConfigSidebar
       node={selectedBlueprintNode}
+      graphNodes={blueprintGraphNodes}
+      graphEdges={blueprintGraphEdges}
+      traceEntries={executionLog?.entries}
       allowFalseSignalPropagation={allowFalseSignalPropagation}
       onUpdateAllowFalseSignalPropagation={onUpdateAllowFalseSignalPropagation}
       viewElementOptions={viewElementOptions}

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;
+}
+
 function mixHex(a: string, b: string, t: number): string {
   const pa = parseHex(a);
   const pb = parseHex(b);
@@ -354,7 +359,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,69 @@
+/** 产物预览是否缩放内部内容（字体等）。默认 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 function writeOutputScale(enabled: boolean) {
+  try {
+    localStorage.setItem(OUTPUT_SCALE_STORAGE_KEY, enabled ? "1" : "0");
+  } catch {
+    // ignore storage errors
+  }
+}
+
+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,
+  };
+}
+
+/**
+ * 预览始终按视口宽高比把场景块撑满。
+ * outputScale=true：CSS transform 缩放整棵内容（含字体）。
+ * outputScale=false：只把场景盒拉到视口大小，节点几何由调用方按 scale 映射，字体不跟着拉伸。
+ */
+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

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