@arronqzy/react-view 1.0.30 → 1.0.32

package/dist/styles.css

@@ -1150,6 +1150,10 @@ video {
   min-width: 0px;
 }
 
+.min-w-\[100px\] {
+  min-width: 100px;
+}
+
 .min-w-\[120px\] {
   min-width: 120px;
 }
@@ -1158,6 +1162,10 @@ video {
   min-width: 140px;
 }
 
+.min-w-\[180px\] {
+  min-width: 180px;
+}
+
 .min-w-\[92px\] {
   min-width: 92px;
 }
@@ -1284,6 +1292,10 @@ video {
   cursor: crosshair;
 }
 
+.cursor-default {
+  cursor: default;
+}
+
 .cursor-grabbing {
   cursor: grabbing;
 }
@@ -1298,6 +1310,12 @@ video {
           user-select: none;
 }
 
+.select-text {
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
+}
+
 .resize-none {
   resize: none;
 }
@@ -3026,6 +3044,16 @@ video {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus-visible\:ring-1:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus-visible\:ring-primary:focus-visible {
+  --tw-ring-color: hsl(var(--primary));
+}
+
 .focus-visible\:ring-offset-0:focus-visible {
   --tw-ring-offset-width: 0px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-view",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "files": [
     "src",
     "dist",
@@ -31,13 +31,13 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.36.2",
     "@arronqzy/ui": "1.0.9",
-    "@arronqzy/blueprint-dsl": "1.0.14",
-    "@arronqzy/i18n": "0.1.12",
-    "@arronqzy/react-blueprint": "1.0.17",
-    "@arronqzy/rx-store": "1.0.8",
+    "@arronqzy/i18n": "0.1.14",
+    "@arronqzy/blueprint-dsl": "1.0.15",
+    "@arronqzy/react-blueprint": "1.0.18",
     "@arronqzy/view-scene3d": "0.1.5",
-    "@arronqzy/view-table": "0.1.8",
-    "@arronqzy/webllm-assistant": "0.1.16"
+    "@arronqzy/rx-store": "1.0.8",
+    "@arronqzy/webllm-assistant": "0.1.16",
+    "@arronqzy/view-table": "0.1.8"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",

package/src/panel/ReactViewPanel.tsx

@@ -143,6 +143,10 @@ export type ReactViewPanelProps = {
    * 省略或空字符串保持历史全局库名。
    */
   nameSpace?: string | null;
+  /** 顶栏「设置 → 关于」展示的 npm 包名，如 @arronqzy/abuilder */
+  packageName?: string | null;
+  /** 顶栏「设置 → 关于」展示的包版本号 */
+  packageVersion?: string | null;
 };
 
 function ReactViewPanelInner({
@@ -150,6 +154,8 @@ function ReactViewPanelInner({
   className,
   initialWorkspace = null,
   nameSpace = null,
+  packageName = null,
+  packageVersion = null,
 }: ReactViewPanelProps) {
   const { t, locale, setLocale } = useI18n();
   const messages = useMemo(() => getPanelMessages(t), [t]);
@@ -1904,6 +1910,8 @@ function ReactViewPanelInner({
           setLocale={setLocale}
           outputScale={outputScale}
           setOutputScale={setOutputScale}
+          packageName={packageName}
+          packageVersion={packageVersion}
         />
         <WorkspaceProjectNav
           projects={workspaceProjects.projects}

package/src/panel/components/ElementsLayer.tsx

@@ -13,6 +13,7 @@ import {
   viewportWindowContentScale,
 } from "../utils/viewportPlacement";
 import { cssTextLineHeight, cssTextAlignStyle } from "../utils/panelElementDefaults";
+import { resolveBackgroundImageStyle } from "../utils/background-image-style";
 import { mergeScene3dConfig } from "@arronqzy/view-scene3d";
 import { Scene3dNodeContent } from "@arronqzy/view-scene3d/react";
 import {
@@ -660,7 +661,7 @@ function getNodeVisualStyle(element: PanelElement): React.CSSProperties {
   const style = element.style ?? {};
   return {
     backgroundColor: style.backgroundColor,
-    backgroundImage: style.backgroundImage,
+    backgroundImage: resolveBackgroundImageStyle(style),
     backgroundSize: style.backgroundSize,
     backgroundPosition: style.backgroundPosition,
     borderWidth: style.borderWidth,

package/src/panel/components/PanelConfigSidebar.tsx

@@ -107,7 +107,7 @@ export function PanelConfigSidebar({
   const matchCountRef = useRef(0);
   const themedScrollbarClass =
     "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>>({
+  const DEFAULT_EXPANDED_SECTIONS: Record<string, boolean> = {
     nodeInfo: true,
     styleBackground: false,
     styleBorder: false,
@@ -117,7 +117,14 @@ export function PanelConfigSidebar({
     chartAdvancedLayout: false,
     chartAdvancedAxisPointer: false,
     reference: true,
-  });
+  };
+  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>(
+    () => ({ ...DEFAULT_EXPANDED_SECTIONS })
+  );
+  const expandedSectionsByIdRef = useRef(new Map<string, Record<string, boolean>>());
+  const expandedSectionsRef = useRef(expandedSections);
+  expandedSectionsRef.current = expandedSections;
+  const activeExpandedKeyRef = useRef<string | null>(null);
 
   const isChartElement = !!selectedElement && CHART_TYPES.has(selectedElement.materialType ?? "");
   const selectedLayer = selectedElement
@@ -179,14 +186,27 @@ export function PanelConfigSidebar({
     el.scrollTop = top;
   }, [configScrollKey]);
 
-  useEffect(() => {
-    if (!selectedElement) return;
-    if (!CHART_TYPES.has(selectedElement.materialType ?? "")) return;
-    setExpandedSections((prev) => ({
-      ...prev,
-      chartBasic: true,
-    }));
-  }, [selectedElement?.id, selectedElement?.materialType]);
+  useLayoutEffect(() => {
+    const prevKey = activeExpandedKeyRef.current;
+    if (prevKey && prevKey !== configScrollKey) {
+      expandedSectionsByIdRef.current.set(prevKey, {
+        ...expandedSectionsRef.current,
+      });
+    }
+    activeExpandedKeyRef.current = configScrollKey;
+    if (!configScrollKey) {
+      setExpandedSections({ ...DEFAULT_EXPANDED_SECTIONS });
+      return;
+    }
+    const saved = expandedSectionsByIdRef.current.get(configScrollKey);
+    if (saved) {
+      setExpandedSections({ ...saved });
+      return;
+    }
+    const initial = { ...DEFAULT_EXPANDED_SECTIONS };
+    expandedSectionsByIdRef.current.set(configScrollKey, initial);
+    setExpandedSections(initial);
+  }, [configScrollKey]);
 
   useEffect(() => {
     if (typeof window === "undefined") return;
@@ -202,7 +222,12 @@ export function PanelConfigSidebar({
     expandedSections[key] ?? defaultValue;
 
   const setSectionExpanded = (key: string, next: boolean) => {
-    setExpandedSections((prev) => ({ ...prev, [key]: next }));
+    setExpandedSections((prev) => {
+      const updated = { ...prev, [key]: next };
+      const id = activeExpandedKeyRef.current;
+      if (id) expandedSectionsByIdRef.current.set(id, updated);
+      return updated;
+    });
   };
 
   useEffect(() => {
@@ -220,6 +245,8 @@ export function PanelConfigSidebar({
         next.geometryCanvasScript = true;
         next.geometrySketch = true;
         next.referenceCopyStrategy = true;
+        const id = activeExpandedKeyRef.current;
+        if (id) expandedSectionsByIdRef.current.set(id, next);
         return next;
       });
       window.requestAnimationFrame(() => {

package/src/panel/components/PanelMenubar.tsx

@@ -8,6 +8,9 @@ import {
   MenubarRadioGroup,
   MenubarRadioItem,
   MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
   MenubarTrigger,
 } from "@arronqzy/ui";
 import type { Locale } from "@arronqzy/i18n";
@@ -37,6 +40,10 @@ export type PanelMenubarProps = {
   setLocale: (locale: Locale) => void;
   outputScale: boolean;
   setOutputScale: (value: boolean) => void;
+  /** 产品包名（可选，关于二级菜单不展示） */
+  packageName?: string | null;
+  /** 产品版本号，如 1.1.32 */
+  packageVersion?: string | null;
 };
 
 export function PanelMenubar({
@@ -64,13 +71,18 @@ export function PanelMenubar({
   setLocale,
   outputScale,
   setOutputScale,
+  packageVersion,
 }: PanelMenubarProps) {
+  const versionOnly =
+    packageVersion && packageVersion.trim()
+      ? t("panel.menubar.versionValue", { version: packageVersion.trim() })
+      : t("panel.menubar.versionUnavailable");
+
   return (
         <Menubar className="h-8 border-0 bg-transparent p-0 shadow-none">
           <MenubarMenu>
             <MenubarTrigger className="px-2 py-1 text-xs font-normal">{t("panel.menubar.file")}</MenubarTrigger>
             <MenubarContent className="z-[10100]">
-              {/* <MenubarItem onClick={handlePreviewLayer}>{t("panel.workspace.previewDocTitle")}</MenubarItem> */}
               <MenubarItem onClick={handleExport}>{t("panel.menubar.export")}</MenubarItem>
               <MenubarItem onClick={() => importInputRef.current?.click()}>{t("panel.menubar.import")}</MenubarItem>
             </MenubarContent>
@@ -113,7 +125,7 @@ export function PanelMenubar({
           </MenubarMenu>
           <MenubarMenu>
             <MenubarTrigger className="px-2 py-1 text-xs font-normal">{t("panel.menubar.settings")}</MenubarTrigger>
-            <MenubarContent className="z-[10100]">
+            <MenubarContent className="z-[10100] min-w-[180px]">
               <MenubarRadioGroup
                 value={panelFontSize}
                 onValueChange={(value) => setPanelFontSize(value as "sm" | "md" | "lg")}
@@ -141,6 +153,20 @@ export function PanelMenubar({
               >
                 {t("panel.menubar.outputScale")}
               </MenubarCheckboxItem>
+              <MenubarSeparator />
+              <MenubarSub>
+                <MenubarSubTrigger>{t("panel.menubar.about")}</MenubarSubTrigger>
+                <MenubarSubContent className="z-[10100] min-w-[100px]">
+                  <MenubarItem
+                    className="cursor-default select-text"
+                    onSelect={(e) => e.preventDefault()}
+                    data-abuilder-version={packageVersion ?? undefined}
+                    title={`${t("panel.menubar.versionLabel")} ${versionOnly}`}
+                  >
+                    {versionOnly}
+                  </MenubarItem>
+                </MenubarSubContent>
+              </MenubarSub>
             </MenubarContent>
           </MenubarMenu>
         </Menubar>

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

@@ -151,7 +151,7 @@ export function PanelConfigAudioSection({
                 {renderFieldGroup(
                   t("panel.config.groupAudioSource"),
                   <>
-                    <label className="block space-y-1">
+                    <label className="block space-y-1" data-config-field="audioRemoteUrl">
                       <div>{t("panel.config.audioUrl")}</div>
                       <Input
                         value={selectedElement.audioRemoteUrl ?? ""}
@@ -161,9 +161,12 @@ export function PanelConfigAudioSection({
                             audioSrc: e.target.value || selectedElement.audioSrc,
                           })
                         }
-                        placeholder="https://example.com/audio.mp3"
-                        className="h-7"
+                        placeholder={t("panel.config.urlScopePlaceholder")}
+                        className="h-7 font-mono text-[11px]"
                       />
+                      <p className="text-[10px] text-muted-foreground">
+                        {t("panel.config.urlScopeHint")}
+                      </p>
                     </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">

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

@@ -117,7 +117,7 @@ export function PanelConfigChartSection({
                   {renderFieldGroup(
                     t("panel.config.groupData"),
                     <>
-                      <label className="block space-y-1">
+                      <label className="block space-y-1" data-config-field="chart.labelsText">
                         <div>{t("panel.config.labelsCsv")}</div>
                         <Input
                           value={getChartLabelsDisplayText(selectedElement.chart)}
@@ -126,11 +126,15 @@ export function PanelConfigChartSection({
                               labelsText: e.target.value,
                             })
                           }
+                          placeholder={t("panel.config.labelsCsvPlaceholder")}
                           className="h-7"
                         />
+                        <p className="text-[10px] text-muted-foreground">
+                          {t("panel.config.scopeTemplateHint")}
+                        </p>
                       </label>
 
-                      <label className="block space-y-1">
+                      <label className="block space-y-1" data-config-field="chart.valuesText">
                         <div>{t("panel.config.valuesCsv")}</div>
                         <Input
                           value={getChartValuesDisplayText(selectedElement.chart)}
@@ -139,8 +143,12 @@ export function PanelConfigChartSection({
                               valuesText: e.target.value,
                             })
                           }
+                          placeholder={t("panel.config.valuesCsvPlaceholder")}
                           className="h-7"
                         />
+                        <p className="text-[10px] text-muted-foreground">
+                          {t("panel.config.scopeTemplateHint")}
+                        </p>
                       </label>
                     </>
                   )}

package/src/panel/components/config/PanelConfigMultiSelect.tsx

@@ -1113,12 +1113,18 @@ export function PanelConfigMultiSelect({
                       ) : null}
                       {el.materialType === "audio" ? (
                     <div className="grid grid-cols-2 gap-2">
-                      <label className="block space-y-1 col-span-2">
+                      <label className="block space-y-1 col-span-2" data-config-field="audioRemoteUrl">
                         <div>{t("panel.config.audioUrl")}</div>
                         <Input
-                          className="h-7"
+                          className="h-7 font-mono text-[11px]"
                           value={el.audioRemoteUrl ?? ""}
-                          onChange={(e) => updateElement(el.id, { audioRemoteUrl: e.target.value || undefined })}
+                          placeholder={t("panel.config.urlScopePlaceholder")}
+                          onChange={(e) =>
+                            updateElement(el.id, {
+                              audioRemoteUrl: e.target.value || undefined,
+                              audioSrc: e.target.value || el.audioSrc,
+                            })
+                          }
                         />
                       </label>
                       <label className="block space-y-1">
@@ -1156,12 +1162,18 @@ export function PanelConfigMultiSelect({
                     </div>
                       ) : null}
                       {el.materialType === "video" ? (
-                    <label className="block space-y-1">
+                    <label className="block space-y-1" data-config-field="videoRemoteUrl">
                       <div>{t("panel.config.videoUrl")}</div>
                       <Input
-                        className="h-7"
+                        className="h-7 font-mono text-[11px]"
                         value={el.videoRemoteUrl ?? ""}
-                        onChange={(e) => updateElement(el.id, { videoRemoteUrl: e.target.value || undefined })}
+                        placeholder={t("panel.config.urlScopePlaceholder")}
+                        onChange={(e) =>
+                          updateElement(el.id, {
+                            videoRemoteUrl: e.target.value || undefined,
+                            videoSrc: e.target.value || el.videoSrc,
+                          })
+                        }
                       />
                     </label>
                       ) : null}

package/src/panel/components/config/PanelConfigScene3dSection.tsx

@@ -69,6 +69,7 @@ export function PanelConfigScene3dSection({
     [element.scene3d]
   );
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [modelUrlDraft, setModelUrlDraft] = useState("");
   const [nameQuery, setNameQuery] = useState<Record<string, string>>({});
   const [openTagKeys, setOpenTagKeys] = useState<Record<string, boolean>>({});
   const patch = useCallback(
@@ -96,6 +97,25 @@ export function PanelConfigScene3dSection({
     patch({ models: nextModels });
   };
 
+  const handleAddModelByUrl = () => {
+    const url = modelUrlDraft.trim();
+    if (!url) return;
+    const fileName = url.split(/[/?#]/).filter(Boolean).pop() || "model";
+    patch({
+      models: [
+        ...config.models,
+        {
+          id: randomId("mdl"),
+          label: fileName.replace(/\.[^.]+$/, "") || fileName,
+          url,
+          fileName,
+          format: inferModelFormat(fileName),
+        },
+      ],
+    });
+    setModelUrlDraft("");
+  };
+
   const updateModelAnimation = (
     id: string,
     next: Partial<Scene3dModelAnimationRule>
@@ -382,6 +402,30 @@ export function PanelConfigScene3dSection({
           }}
         />
       </div>
+      <label className="block space-y-1" data-config-field="scene3d.modelUrl">
+        <div className="text-[10px] text-muted-foreground">
+          {t("panel.config.scene3dModelUrl")}
+        </div>
+        <div className="flex gap-1.5">
+          <Input
+            value={modelUrlDraft}
+            onChange={(e) => setModelUrlDraft(e.target.value)}
+            placeholder={t("panel.config.urlScopePlaceholder")}
+            className="h-7 flex-1 font-mono text-[11px]"
+          />
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            className="h-7 shrink-0 text-[11px]"
+            disabled={!modelUrlDraft.trim()}
+            onClick={handleAddModelByUrl}
+          >
+            {t("common.add")}
+          </Button>
+        </div>
+        <p className="text-[10px] text-muted-foreground">{t("panel.config.urlScopeHint")}</p>
+      </label>
 
       {config.models.length === 0 ? (
         <div className="rounded border border-dashed border-border/70 px-2 py-3 text-[11px] text-muted-foreground">
@@ -432,6 +476,34 @@ export function PanelConfigScene3dSection({
                 </Button>
               </div>
               <div className="text-[10px] text-muted-foreground">{model.fileName ?? model.url.slice(0, 48)}</div>
+              <label className="block space-y-0.5">
+                <span className="text-[10px] text-muted-foreground">
+                  {t("panel.config.scene3dModelUrl")}
+                </span>
+                <Input
+                  value={model.url}
+                  data-config-field="scene3d.models.url"
+                  className="h-7 font-mono text-[10px]"
+                  placeholder={t("panel.config.urlScopePlaceholder")}
+                  onChange={(e) => {
+                    const nextUrl = e.target.value;
+                    const fileName =
+                      nextUrl.split(/[/?#]/).filter(Boolean).pop() || model.fileName || "model";
+                    patch({
+                      models: config.models.map((m) =>
+                        m.id === model.id
+                          ? {
+                              ...m,
+                              url: nextUrl,
+                              fileName,
+                              format: inferModelFormat(fileName),
+                            }
+                          : m
+                      ),
+                    });
+                  }}
+                />
+              </label>
               <div className="grid grid-cols-3 gap-1">
                 {(["x", "y", "z"] as const).map((axis, index) => (
                   <Input

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

@@ -10,6 +10,7 @@ import {
 } from "@arronqzy/ui";
 import type { PanelElement, PanelElementStyle } from "../../types";
 import { readFileAsDataUrl, runBusyTask } from "../../utils/async-work";
+import { patchBackgroundImageFromInput } from "../../utils/background-image-style";
 import { getPanelMessages } from "../../constants/messages";
 import { type ConfigSectionHelpers, type UpdateElement } from "./helpers";
 
@@ -88,14 +89,23 @@ export function PanelConfigStyleSections({
               {renderFieldGroup(
                 t("panel.config.groupBgLayout"),
                 <>
-                  <label className="block space-y-1">
+                  <label className="block space-y-1" data-config-field="style.backgroundImage">
                     <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"
+                      value={
+                        selectedElement.style?.backgroundImageRemoteUrl ??
+                        selectedElement.style?.backgroundImage ??
+                        ""
+                      }
+                      onChange={(e) =>
+                        updateSelectedStyle(patchBackgroundImageFromInput(e.target.value))
+                      }
+                      placeholder={t("panel.config.urlScopePlaceholder")}
+                      className="h-7 font-mono text-[11px]"
                     />
+                    <p className="text-[10px] text-muted-foreground">
+                      {t("panel.config.urlScopeHint")}
+                    </p>
                   </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">

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

@@ -110,6 +110,25 @@ export function PanelConfigTextSection({
                         });
                       }}
                     />
+                    <label className="block space-y-1">
+                      <div>{t("panel.config.textHtmlSource")}</div>
+                      <textarea
+                        data-config-field="textHtml"
+                        value={selectedElement.textHtml ?? ""}
+                        onChange={(e) =>
+                          updateSelectedText({
+                            textHtml: e.target.value || "<p><br/></p>",
+                          })
+                        }
+                        rows={4}
+                        spellCheck={false}
+                        placeholder={t("panel.config.textHtmlSourcePlaceholder")}
+                        className="w-full rounded border border-border bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed outline-none focus-visible:ring-1 focus-visible:ring-primary"
+                      />
+                      <p className="text-[10px] text-muted-foreground">
+                        {t("panel.config.scopeTemplateHint")}
+                      </p>
+                    </label>
                   </>
                 )}
                 {renderFieldGroup(

package/src/panel/components/config/PanelConfigVideoSection.tsx

@@ -69,7 +69,7 @@ export function PanelConfigVideoSection({
                 {renderFieldGroup(
                   t("panel.config.groupVideoSource"),
                   <>
-                    <label className="block space-y-1">
+                    <label className="block space-y-1" data-config-field="videoRemoteUrl">
                       <div>{t("panel.config.videoUrl")}</div>
                       <Input
                         value={selectedElement.videoRemoteUrl ?? ""}
@@ -79,9 +79,12 @@ export function PanelConfigVideoSection({
                             videoSrc: e.target.value || selectedElement.videoSrc,
                           })
                         }
-                        placeholder="https://example.com/video.mp4"
-                        className="h-7"
+                        placeholder={t("panel.config.urlScopePlaceholder")}
+                        className="h-7 font-mono text-[11px]"
                       />
+                      <p className="text-[10px] text-muted-foreground">
+                        {t("panel.config.urlScopeHint")}
+                      </p>
                     </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">

package/src/panel/utils/background-image-style.ts

@@ -0,0 +1,39 @@
+import type { PanelElementStyle } from "../types";
+
+/** Build a CSS `url('...')` value from a plain URL / template string. */
+export function cssUrlFromValue(value: string): string {
+  const trimmed = value.trim();
+  if (!trimmed) return "";
+  if (/^url\(/i.test(trimmed) || /gradient\(/i.test(trimmed)) return trimmed;
+  const escaped = trimmed.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+  return `url('${escaped}')`;
+}
+
+/** Prefer explicit backgroundImage; fall back to remote URL (supports scope templates after resolve). */
+export function resolveBackgroundImageStyle(
+  style?: PanelElementStyle | null
+): string | undefined {
+  if (!style) return undefined;
+  if (style.backgroundImage?.trim()) return style.backgroundImage;
+  if (style.backgroundImageRemoteUrl?.trim()) {
+    return cssUrlFromValue(style.backgroundImageRemoteUrl);
+  }
+  return undefined;
+}
+
+/** Normalize config input: plain URL/template → both css + remote; css/gradient → backgroundImage only. */
+export function patchBackgroundImageFromInput(
+  value: string
+): Partial<PanelElementStyle> {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return { backgroundImage: undefined, backgroundImageRemoteUrl: undefined };
+  }
+  if (/^url\(/i.test(trimmed) || /gradient\(/i.test(trimmed)) {
+    return { backgroundImage: trimmed, backgroundImageRemoteUrl: undefined };
+  }
+  return {
+    backgroundImage: cssUrlFromValue(trimmed),
+    backgroundImageRemoteUrl: trimmed,
+  };
+}

package/src/panel/utils/scope-template-chart.ts

@@ -90,3 +90,15 @@ export function materializeChartLabelsFromScope(
   }
   return undefined;
 }
+
+/** Prefer valuesText templates; expand [...{scope}] / {scope} into number[]. */
+export function materializeChartValuesFromScope(
+  chart: PanelChartConfig | undefined,
+  scope: unknown
+): number[] | undefined {
+  if (!chart) return undefined;
+  if (chart.valuesText !== undefined) {
+    return materializeChartValuesText(chart.valuesText, scope);
+  }
+  return undefined;
+}

package/src/panel/utils/scope-template.ts

@@ -1,7 +1,7 @@
 import type { PanelElement } from "../types";
 import type { PanelTableConfig } from "@arronqzy/view-table";
 import { isUsableTableRawData } from "@arronqzy/view-table";
-import { materializeChartLabelsFromScope } from "./scope-template-chart";
+import { materializeChartLabelsFromScope, materializeChartValuesFromScope } from "./scope-template-chart";
 import {
   SCOPE_SPREAD_TEMPLATE_RE,
   evaluateSpreadScopeExpression,
@@ -11,10 +11,12 @@ import {
   resolveSpreadScopePath,
 } from "./scope-template-spread";
 
-const SCOPE_TEMPLATE_RE = /\{[^}]+\}|\[\.\.\.\{[^}]+\}\]/;
+const SCOPE_TOKEN_RE = /\{(scope[^}]*)\}/g;
 
 export function hasScopeTemplate(value: string): boolean {
-  return SCOPE_TEMPLATE_RE.test(value);
+  SCOPE_TOKEN_RE.lastIndex = 0;
+  SCOPE_SPREAD_TEMPLATE_RE.lastIndex = 0;
+  return SCOPE_TOKEN_RE.test(value) || SCOPE_SPREAD_TEMPLATE_RE.test(value);
 }
 
 export function evaluateScopeExpression(
@@ -31,6 +33,19 @@ export function evaluateScopeExpression(
   }
 }
 
+function stringifyScopeValue(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
 export function evaluateScopeTemplate(
   template: string,
   scope: unknown
@@ -45,19 +60,10 @@ export function evaluateScopeTemplate(
     }
   );
 
-  return withSpread.replace(/\{([^}]+)\}/g, (_: string, rawExpr: string) => {
-    const value = evaluateScopeExpression(rawExpr, scope);
-    if (value === null || value === undefined) return "";
-    if (typeof value === "string") return value;
-    if (typeof value === "number" || typeof value === "boolean") {
-      return String(value);
-    }
-    try {
-      return JSON.stringify(value);
-    } catch {
-      return String(value);
-    }
-  });
+  // Only `{scope...}` tokens — keep ECharts / CSS braces like `{b}` intact.
+  return withSpread.replace(SCOPE_TOKEN_RE, (_: string, rawExpr: string) =>
+    stringifyScopeValue(evaluateScopeExpression(rawExpr, scope))
+  );
 }
 
 function tryParseJson(text: string): unknown | undefined {
@@ -85,7 +91,7 @@ function materializeTemplateValue(template: string, scope: unknown): unknown {
     );
   }
 
-  const singleMatch = /^\{([^}]+)\}$/.exec(trimmed);
+  const singleMatch = /^\{(scope[^}]*)\}$/.exec(trimmed);
   if (singleMatch) {
     return evaluateScopeExpression(singleMatch[1]!, scope);
   }
@@ -148,6 +154,11 @@ export function resolvePanelElementScope(
       resolved.chart.labels = labels;
       delete resolved.chart.labelsText;
     }
+    const values = materializeChartValuesFromScope(element.chart, scope);
+    if (values !== undefined) {
+      resolved.chart.values = values;
+      delete resolved.chart.valuesText;
+    }
   }
   if (resolved.table) {
     const hasDynamicSource =