@arronqzy/react-view 1.0.12 → 1.0.14

package/src/panel/components/PanelConfigSidebar.tsx

@@ -37,10 +37,10 @@ import { collectElementScopeWarnings } from "../utils/scope-template-warnings";
 import { ScopeConfigProvider } from "./scope-config/ScopeConfigContext";
 import { ScopeTemplateWarningsPanel } from "./scope-config/ScopeTemplateWarningsPanel";
 import { PanelConfigTableSection } from "./table/PanelConfigTableSection";
-import {
-  highlightConfigField,
-  subscribeRevealPanelConfig,
-} from "../ai/revealConfigField";
+import { cssTextLineHeight, cssTextAlignStyle } from "../utils/panelElementDefaults";
+import { highlightConfigField, subscribeRevealPanelConfig } from "../ai/revealConfigField";
+import { PanelConfigScene3dSection } from "./config/PanelConfigScene3dSection";
+import { readFileAsDataUrl, runBusyTask } from "../utils/async-work";
 
 type UpdateElement = (
   id: string,
@@ -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,
@@ -262,31 +262,34 @@ export function PanelConfigSidebar({
   const handleUploadBackgroundImage = useCallback(
     async (file: File) => {
       if (!selectedElement) return;
-      const base64 = await new Promise<string>((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(String(reader.result ?? ""));
-        reader.onerror = () => reject(new Error(messages.readImageFailed));
-        reader.readAsDataURL(file);
-      });
-      updateSelectedStyle({
-        backgroundImage: `url("${base64}")`,
-      });
-      setUploadStatus(t("panel.config.uploadWrittenBase64"));
       try {
-        const form = new FormData();
-        form.append("file", file);
-        const resp = await fetch("/api/upload", { method: "POST", body: form });
-        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-        const data = (await resp.json()) as { url?: string };
-        if (data.url) {
-          updateSelectedStyle({ backgroundImageRemoteUrl: data.url });
-          setUploadStatus(t("panel.config.uploadServerAndBase64"));
-        }
-      } catch {
-        setUploadStatus(t("panel.config.uploadServerFailedKeepBase64"));
+        await runBusyTask(t("common.uploadingFile"), async () => {
+          const base64 = await readFileAsDataUrl(file, messages.readImageFailed, "image");
+          updateSelectedStyle({
+            backgroundImage: `url("${base64}")`,
+          });
+          setUploadStatus(t("panel.config.uploadWrittenBase64"));
+          try {
+            const form = new FormData();
+            form.append("file", file);
+            const resp = await fetch("/api/upload", { method: "POST", body: form });
+            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+            const data = (await resp.json()) as { url?: string };
+            if (data.url) {
+              updateSelectedStyle({ backgroundImageRemoteUrl: data.url });
+              setUploadStatus(t("panel.config.uploadServerAndBase64"));
+            }
+          } catch {
+            setUploadStatus(t("panel.config.uploadServerFailedKeepBase64"));
+          }
+        });
+      } catch (error) {
+        setUploadStatus(
+          error instanceof Error ? error.message : messages.readImageFailed
+        );
       }
     },
-    [selectedElement, updateSelectedStyle]
+    [messages.readImageFailed, selectedElement, t, updateSelectedStyle]
   );
   const updateSelectedAudio = useCallback(
     (patch: Partial<PanelElement>) => {
@@ -298,43 +301,47 @@ export function PanelConfigSidebar({
   const handleUploadAudioFile = useCallback(
     async (file: File) => {
       if (!selectedElement || selectedElement.materialType !== "audio") return;
-      const base64 = await new Promise<string>((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(String(reader.result ?? ""));
-        reader.onerror = () => reject(new Error(messages.readAudioFailed));
-        reader.readAsDataURL(file);
-      });
-      updateSelectedAudio({ audioSrc: base64 });
-      setAudioStatus(messages.audioLocalSaved);
       try {
-        const form = new FormData();
-        form.append("file", file);
-        const resp = await fetch("/api/upload", { method: "POST", body: form });
-        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-        const data = (await resp.json()) as { url?: string };
-        if (data.url) {
-          updateSelectedAudio({ audioRemoteUrl: data.url });
-          setAudioStatus(messages.audioRemoteUploaded);
-        }
-      } catch {
-        setAudioStatus(messages.audioServerUploadFailed);
+        await runBusyTask(t("common.uploadingFile"), async () => {
+          const base64 = await readFileAsDataUrl(file, messages.readAudioFailed, "audio");
+          updateSelectedAudio({ audioSrc: base64 });
+          setAudioStatus(messages.audioLocalSaved);
+          try {
+            const form = new FormData();
+            form.append("file", file);
+            const resp = await fetch("/api/upload", { method: "POST", body: form });
+            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+            const data = (await resp.json()) as { url?: string };
+            if (data.url) {
+              updateSelectedAudio({ audioRemoteUrl: data.url });
+              setAudioStatus(messages.audioRemoteUploaded);
+            }
+          } catch {
+            setAudioStatus(messages.audioServerUploadFailed);
+          }
+        });
+      } catch (error) {
+        setAudioStatus(
+          error instanceof Error ? error.message : messages.readAudioFailed
+        );
       }
     },
-    [selectedElement, updateSelectedAudio]
+    [messages, selectedElement, t, updateSelectedAudio]
   );
   const handleUploadAudioPoster = useCallback(
     async (file: File) => {
       if (!selectedElement || selectedElement.materialType !== "audio") return;
-      const base64 = await new Promise<string>((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(String(reader.result ?? ""));
-        reader.onerror = () => reject(new Error(messages.readImageFailed));
-        reader.readAsDataURL(file);
-      });
-      updateSelectedAudio({ audioPosterImage: base64 });
-      setAudioStatus(messages.audioPosterSet);
+      try {
+        const base64 = await readFileAsDataUrl(file, messages.readImageFailed, "image");
+        updateSelectedAudio({ audioPosterImage: base64 });
+        setAudioStatus(messages.audioPosterSet);
+      } catch (error) {
+        setAudioStatus(
+          error instanceof Error ? error.message : messages.readImageFailed
+        );
+      }
     },
-    [selectedElement, updateSelectedAudio]
+    [messages, selectedElement, updateSelectedAudio]
   );
   const stopRecordingAudio = useCallback(() => {
     recorderRef.current?.stop();
@@ -356,14 +363,15 @@ export function PanelConfigSidebar({
       };
       recorder.onstop = async () => {
         const blob = new Blob(audioChunksRef.current, { type: recorder.mimeType || "audio/webm" });
-        const dataUrl = await new Promise<string>((resolve, reject) => {
-          const reader = new FileReader();
-          reader.onload = () => resolve(String(reader.result ?? ""));
-          reader.onerror = () => reject(new Error(messages.readRecordAudioFailed));
-          reader.readAsDataURL(blob);
-        });
-        updateSelectedAudio({ audioSrc: dataUrl });
-        setAudioStatus(messages.audioRecordSaved);
+        try {
+          const dataUrl = await readFileAsDataUrl(blob, messages.readRecordAudioFailed, "audio");
+          updateSelectedAudio({ audioSrc: dataUrl });
+          setAudioStatus(messages.audioRecordSaved);
+        } catch (error) {
+          setAudioStatus(
+            error instanceof Error ? error.message : messages.readRecordAudioFailed
+          );
+        }
         recordStreamRef.current?.getTracks().forEach((track) => track.stop());
         recordStreamRef.current = null;
         recorderRef.current = null;
@@ -387,29 +395,32 @@ export function PanelConfigSidebar({
   const handleUploadVideoFile = useCallback(
     async (file: File) => {
       if (!selectedElement || selectedElement.materialType !== "video") return;
-      const base64 = await new Promise<string>((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(String(reader.result ?? ""));
-        reader.onerror = () => reject(new Error(messages.readVideoFailed));
-        reader.readAsDataURL(file);
-      });
-      updateSelectedVideo({ videoSrc: base64 });
-      setVideoStatus(messages.videoLocalSaved);
       try {
-        const form = new FormData();
-        form.append("file", file);
-        const resp = await fetch("/api/upload", { method: "POST", body: form });
-        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-        const data = (await resp.json()) as { url?: string };
-        if (data.url) {
-          updateSelectedVideo({ videoRemoteUrl: data.url });
-          setVideoStatus(messages.videoRemoteUploaded);
-        }
-      } catch {
-        setVideoStatus(messages.videoServerUploadFailed);
+        await runBusyTask(t("common.uploadingFile"), async () => {
+          const base64 = await readFileAsDataUrl(file, messages.readVideoFailed, "video");
+          updateSelectedVideo({ videoSrc: base64 });
+          setVideoStatus(messages.videoLocalSaved);
+          try {
+            const form = new FormData();
+            form.append("file", file);
+            const resp = await fetch("/api/upload", { method: "POST", body: form });
+            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+            const data = (await resp.json()) as { url?: string };
+            if (data.url) {
+              updateSelectedVideo({ videoRemoteUrl: data.url });
+              setVideoStatus(messages.videoRemoteUploaded);
+            }
+          } catch {
+            setVideoStatus(messages.videoServerUploadFailed);
+          }
+        });
+      } catch (error) {
+        setVideoStatus(
+          error instanceof Error ? error.message : messages.readVideoFailed
+        );
       }
     },
-    [selectedElement, updateSelectedVideo]
+    [messages, selectedElement, t, updateSelectedVideo]
   );
 
   const isSectionExpanded = (key: string, defaultValue = true) =>
@@ -421,9 +432,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 +498,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 +1424,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 +1938,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 +1957,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 +1985,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 +2016,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 +2072,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 +2325,9 @@ export function PanelConfigSidebar({
                           </SelectContent>
                         </Select>
                       </label>
-                    </>
+                    </>,
+                    undefined,
+                    { groupKey: "chartDisplayMore", defaultOpen: false }
                   )}
                   {renderFieldGroup(
                     t("panel.config.groupTooltip"),
@@ -2361,39 +2384,10 @@ export function PanelConfigSidebar({
                           className="h-7"
                         />
                       </label>
-                    </>
-                  )}
-                  {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>
-                    </>
+                    </>,
+                    undefined,
+                    { groupKey: "chartTooltip", defaultOpen: false }
                   )}
-
                   {selectedChartType === "bar" ||
                   selectedChartType === "line" ||
                   selectedChartType === "area" ||
@@ -2555,88 +2549,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,
                 [
@@ -2941,7 +2859,8 @@ export function PanelConfigSidebar({
                     <div
                       ref={textEditorRef}
                       data-config-field="textHtml"
-                      className="min-h-[120px] rounded border border-border bg-background px-2 py-1.5 text-xs leading-6 outline-none"
+                      data-panel-user-text=""
+                      className="min-h-[120px] rounded border border-border bg-background px-2 py-1.5 leading-6 outline-none"
                       style={{
                         fontFamily: selectedElement.textFontFamily || undefined,
                         fontSize: selectedElement.textFontSize
@@ -2949,10 +2868,8 @@ export function PanelConfigSidebar({
                           : undefined,
                         fontWeight: selectedElement.textFontWeight || undefined,
                         color: selectedElement.textColor || undefined,
-                        lineHeight: selectedElement.textLineHeight
-                          ? String(selectedElement.textLineHeight)
-                          : undefined,
-                        textAlign: selectedElement.textAlign ?? "left",
+                        lineHeight: cssTextLineHeight(selectedElement.textLineHeight),
+                        ...cssTextAlignStyle(selectedElement.textAlign),
                       }}
                       contentEditable
                       suppressContentEditableWarning
@@ -3028,7 +2945,7 @@ export function PanelConfigSidebar({
                           value={selectedElement.textAlign ?? "left"}
                           onValueChange={(value) =>
                             updateSelectedText({
-                              textAlign: value as "left" | "center" | "right" | "justify",
+                              textAlign: value as PanelElement["textAlign"],
                             })
                           }
                         >
@@ -3038,19 +2955,40 @@ export function PanelConfigSidebar({
                           <SelectContent>
                             <SelectItem value="left">{t("panel.config.alignLeft")}</SelectItem>
                             <SelectItem value="center">{t("panel.config.alignCenter")}</SelectItem>
+                            <SelectItem value="middle">{t("panel.config.alignMiddle")}</SelectItem>
                             <SelectItem value="right">{t("panel.config.alignRight")}</SelectItem>
                             <SelectItem value="justify">{t("panel.config.alignJustify")}</SelectItem>
                           </SelectContent>
                         </Select>
                       </label>
                       <label className="block space-y-1">
-                        <div>{t("panel.config.lineHeight")}</div>
+                        <div className="flex items-center justify-between gap-2">
+                          <span>{t("panel.config.lineHeight")}</span>
+                          <label className="flex items-center gap-1 font-normal">
+                            <Checkbox
+                              checked={selectedElement.textLineHeight === "auto"}
+                              className="h-3.5 w-3.5 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) =>
+                                updateSelectedText({
+                                  textLineHeight: checked === true ? "auto" : 1.6,
+                                })
+                              }
+                            />
+                            <span>{t("panel.config.lineHeightAuto")}</span>
+                          </label>
+                        </div>
                         <Input
                           type="number"
                           min={1}
                           max={3}
                           step={0.1}
-                          value={selectedElement.textLineHeight ?? 1.6}
+                          disabled={selectedElement.textLineHeight === "auto"}
+                          placeholder={t("panel.config.lineHeightAuto")}
+                          value={
+                            selectedElement.textLineHeight === "auto"
+                              ? ""
+                              : (selectedElement.textLineHeight ?? 1.6)
+                          }
                           onChange={(e) =>
                             updateSelectedText({
                               textLineHeight: Math.min(
@@ -3086,7 +3024,9 @@ export function PanelConfigSidebar({
                       }
                     />
                     <span>{t("panel.config.allowCanvasInput")}</span>
-                  </label>
+                  </label>,
+                  undefined,
+                  { groupKey: "textInputAbility", defaultOpen: false }
                 )}
               </>,
               true,
@@ -3269,7 +3209,9 @@ export function PanelConfigSidebar({
                         {t("panel.config.audioPosterHint")}
                       </ConfigHintIcon>
                     </div>
-                  </>
+                  </>,
+                  undefined,
+                  { groupKey: "audioDisplayStyle", defaultOpen: false }
                 )}
               </>,
               true,
@@ -3442,7 +3384,8 @@ export function PanelConfigSidebar({
                   </>,
                   <>
                     {t("panel.config.canvasScriptHint")}
-                  </>
+                  </>,
+                  { groupKey: "geometryCanvasScript", defaultOpen: false }
                 )}
                 {renderFieldGroup(
                   t("panel.config.groupSketchOverlay"),
@@ -3539,12 +3482,32 @@ export function PanelConfigSidebar({
                         {t("panel.config.clearSketch")}
                       </button>
                     </div>
-                  </>
+                  </>,
+                  undefined,
+                  { groupKey: "geometrySketch", defaultOpen: false }
                 )}
               </>,
               true,
               [t("panel.material.geometry"), "geometry", t("panel.config.shape"), "canvas", t("panel.config.searchKwScript"), t("panel.config.searchKwSketch")]
             )
+          ) : selectedElement.materialType === "scene3d" ? (
+            renderSection(
+              "scene3dConfig",
+              t("panel.config.sectionScene3d"),
+              <PanelConfigScene3dSection
+                element={selectedElement}
+                updateElement={updateElement}
+              />,
+              true,
+              [
+                t("panel.material.scene3d"),
+                "3d",
+                "glb",
+                t("panel.config.scene3dUploadModels"),
+                t("panel.config.groupScene3dCamera"),
+                t("panel.config.groupScene3dModelAnim"),
+              ]
+            )
           ) : selectedElement.materialType === "grid" ? (
             renderSection(
               "gridConfig",
@@ -3699,17 +3662,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")}