@arronqzy/react-view 1.0.26 → 1.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-view",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "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/react-blueprint": "1.0.16",
+    "@arronqzy/blueprint-dsl": "1.0.14",
     "@arronqzy/i18n": "0.1.11",
     "@arronqzy/rx-store": "1.0.8",
     "@arronqzy/view-scene3d": "0.1.5",
-    "@arronqzy/view-table": "0.1.8",
-    "@arronqzy/webllm-assistant": "0.1.14"
+    "@arronqzy/webllm-assistant": "0.1.16",
+    "@arronqzy/view-table": "0.1.8"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",
@@ -46,8 +46,8 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "@arronqzy/eslint-config": "0.0.0",
-    "@arronqzy/typescript-config": "1.0.0",
-    "@arronqzy/tailwind": "1.0.2"
+    "@arronqzy/tailwind": "1.0.2",
+    "@arronqzy/typescript-config": "1.0.0"
   },
   "scripts": {
     "lint": "eslint \"src/**/*.{ts,tsx}\"",

package/src/panel/components/PanelConfigSidebar.tsx

@@ -213,30 +213,30 @@ export function PanelConfigSidebar({
     if (!hit) return null;
     matchCountRef.current += 1;
     return (
-      <Collapsible
-        open={hasSearch ? true : isSectionExpanded(key, defaultOpen)}
-        onOpenChange={(open) => setSectionExpanded(key, open)}
-        className="rounded-xl border border-border/70 bg-card/95 shadow-sm"
-        data-config-section={key}
-      >
-        <div className="flex items-center gap-1.5 px-3 py-2">
-          <CollapsibleTrigger asChild>
-            <button
-              type="button"
-              className="flex h-6 w-6 items-center justify-center rounded-md text-xs hover:bg-accent"
-            >
-              {isSectionExpanded(key, defaultOpen) ? "▾" : "▸"}
-            </button>
-          </CollapsibleTrigger>
-          <div className="flex min-w-0 flex-1 items-center gap-1">
-            <div className="text-[11px] font-semibold tracking-wide text-muted-foreground">{title}</div>
-            {hint ? <ConfigHintIcon label={title}>{hint}</ConfigHintIcon> : null}
-          </div>
+    <Collapsible
+      open={hasSearch ? true : isSectionExpanded(key, defaultOpen)}
+      onOpenChange={(open) => setSectionExpanded(key, open)}
+      className="rounded-xl border border-border/70 bg-card/95 shadow-sm"
+      data-config-section={key}
+    >
+      <div className="flex items-center gap-1.5 px-3 py-2">
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex h-6 w-6 items-center justify-center rounded-md text-xs hover:bg-accent"
+          >
+            {isSectionExpanded(key, defaultOpen) ? "▾" : "▸"}
+          </button>
+        </CollapsibleTrigger>
+        <div className="flex min-w-0 flex-1 items-center gap-1">
+          <div className="text-[11px] font-semibold tracking-wide text-muted-foreground">{title}</div>
+          {hint ? <ConfigHintIcon label={title}>{hint}</ConfigHintIcon> : null}
         </div>
-        <CollapsibleContent className="space-y-3 border-t border-border/60 bg-muted/[0.1] px-3 pb-3 pt-2.5">
-          {children}
-        </CollapsibleContent>
-      </Collapsible>
+      </div>
+      <CollapsibleContent className="space-y-3 border-t border-border/60 bg-muted/[0.1] px-3 pb-3 pt-2.5">
+        {children}
+      </CollapsibleContent>
+    </Collapsible>
     );
   };
 
@@ -360,51 +360,51 @@ export function PanelConfigSidebar({
       warnings={scopeWarnings}
       scrollContainerRef={sidebarScrollRef}
     >
-      <aside
-        ref={sidebarScrollRef}
-        className={`scope-config-sidebar h-full overflow-auto border-l border-border bg-muted/[0.14] px-3 py-3 text-foreground [&_.config-field--highlight]:rounded-md [&_.config-field--highlight]:ring-2 [&_.config-field--highlight]:ring-sky-400/80 [&_.scope-field--highlight]:rounded-md [&_.scope-field--highlight]:ring-2 [&_.scope-field--highlight]:ring-amber-400/80 [&_button[role=checkbox]]:border-2 [&_button[role=checkbox]]:border-foreground/80 [&_button[role=checkbox]]:bg-background [&_button[role=checkbox]]:ring-1 [&_button[role=checkbox]]:ring-foreground/40 [&_button[role=checkbox][data-state=checked]]:border-primary [&_button[role=checkbox][data-state=checked]]:ring-primary/40 ${themedScrollbarClass}`}
-      >
-        <div className="sticky top-0 z-20 mb-3 rounded-lg border border-border/70 bg-card/95 px-2.5 py-2 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-card/80">
-          <div className="flex items-center justify-between gap-2">
-            <div className="text-xs font-semibold tracking-wide">{t("panel.config.panelTitle")}</div>
-          </div>
+    <aside
+      ref={sidebarScrollRef}
+      className={`scope-config-sidebar h-full overflow-auto border-l border-border bg-muted/[0.14] px-3 py-3 text-foreground [&_.config-field--highlight]:rounded-md [&_.config-field--highlight]:ring-2 [&_.config-field--highlight]:ring-sky-400/80 [&_.scope-field--highlight]:rounded-md [&_.scope-field--highlight]:ring-2 [&_.scope-field--highlight]:ring-amber-400/80 [&_button[role=checkbox]]:border-2 [&_button[role=checkbox]]:border-foreground/80 [&_button[role=checkbox]]:bg-background [&_button[role=checkbox]]:ring-1 [&_button[role=checkbox]]:ring-foreground/40 [&_button[role=checkbox][data-state=checked]]:border-primary [&_button[role=checkbox][data-state=checked]]:ring-primary/40 ${themedScrollbarClass}`}
+    >
+      <div className="sticky top-0 z-20 mb-3 rounded-lg border border-border/70 bg-card/95 px-2.5 py-2 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-card/80">
+        <div className="flex items-center justify-between gap-2">
+          <div className="text-xs font-semibold tracking-wide">{t("panel.config.panelTitle")}</div>
+        </div>
           {showScopePanel ? <ViewElementScopePanel scope={viewElementScope} /> : null}
-          <ScopeTemplateWarningsPanel />
-          <div
-            className={
-              showScopePanel || scopeWarnings.length > 0
-                ? "mt-2 border-t border-border/50 pt-2"
-                : "mt-0"
-            }
-          >
-            <div className="flex items-center justify-end gap-2">
-              <button
-                type="button"
-                className="rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground hover:bg-accent"
-                onClick={() => setIsSearchCollapsed((prev) => !prev)}
-              >
-                {isSearchCollapsed ? t("panel.config.expandSearch") : t("panel.config.collapseSearch")}
-              </button>
-            </div>
-            {!isSearchCollapsed ? (
-              <div className="mt-2">
-                <Input
-                  value={configSearch}
-                  onChange={(e) => setConfigSearch(e.target.value)}
-                  placeholder={t("panel.config.searchPlaceholder")}
-                  className="h-7"
-                  data-scope-autocomplete="off"
-                />
-                {hasSearch ? (
-                  <div className="mt-1 text-[11px] text-muted-foreground">
-                    {t("panel.config.searching", { query: configSearch })}
-                  </div>
-                ) : null}
-              </div>
-            ) : null}
+        <ScopeTemplateWarningsPanel />
+        <div
+          className={
+            showScopePanel || scopeWarnings.length > 0
+              ? "mt-2 border-t border-border/50 pt-2"
+              : "mt-0"
+          }
+        >
+          <div className="flex items-center justify-end gap-2">
+            <button
+              type="button"
+              className="rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground hover:bg-accent"
+              onClick={() => setIsSearchCollapsed((prev) => !prev)}
+            >
+              {isSearchCollapsed ? t("panel.config.expandSearch") : t("panel.config.collapseSearch")}
+            </button>
           </div>
+          {!isSearchCollapsed ? (
+            <div className="mt-2">
+              <Input
+                value={configSearch}
+                onChange={(e) => setConfigSearch(e.target.value)}
+                placeholder={t("panel.config.searchPlaceholder")}
+                className="h-7"
+                data-scope-autocomplete="off"
+              />
+              {hasSearch ? (
+                <div className="mt-1 text-[11px] text-muted-foreground">
+                  {t("panel.config.searching", { query: configSearch })}
+                </div>
+              ) : null}
+            </div>
+          ) : null}
         </div>
-        {isMultiSelectMode ? (
+      </div>
+      {isMultiSelectMode ? (
           <PanelConfigMultiSelect
             elements={effectiveSelectedElements}
             helpers={helpers}
@@ -414,34 +414,34 @@ export function PanelConfigSidebar({
             onExcludeSelectedNode={onExcludeSelectedNode}
             onAdjustNodeZOrder={onAdjustNodeZOrder}
           />
-        ) : null}
-        {!isMultiSelectMode && !selectedElement ? (
-          <Empty className="py-7">
-            <EmptyIcon>
-              <svg
-                viewBox="0 0 24 24"
-                className="h-4 w-4"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.8"
-                aria-hidden="true"
-              >
-                <rect x="4" y="4" width="16" height="16" rx="2.5" />
-                <path d="M8 9h8M8 12h8M8 15h5" />
-              </svg>
-            </EmptyIcon>
-            <EmptyTitle>{t("panel.config.emptyNoNodeTitle")}</EmptyTitle>
-            <EmptyDescription>{t("panel.config.emptyNoNodeDesc")}</EmptyDescription>
-          </Empty>
-        ) : !isMultiSelectMode && selectedElement ? (
-          <div className="space-y-3">
-            {!isNodeEditable ? (
-              <div className="rounded border border-amber-500/40 bg-amber-500/10 px-2 py-1.5 text-[11px] text-amber-700 dark:text-amber-300">
-                {readonlyReason}
-              </div>
-            ) : null}
-            <fieldset disabled={!isNodeEditable} className={!isNodeEditable ? "opacity-60" : ""}>
-              <div className="space-y-3.5 text-xs">
+      ) : null}
+      {!isMultiSelectMode && !selectedElement ? (
+        <Empty className="py-7">
+          <EmptyIcon>
+            <svg
+              viewBox="0 0 24 24"
+              className="h-4 w-4"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.8"
+              aria-hidden="true"
+            >
+              <rect x="4" y="4" width="16" height="16" rx="2.5" />
+              <path d="M8 9h8M8 12h8M8 15h5" />
+            </svg>
+          </EmptyIcon>
+          <EmptyTitle>{t("panel.config.emptyNoNodeTitle")}</EmptyTitle>
+          <EmptyDescription>{t("panel.config.emptyNoNodeDesc")}</EmptyDescription>
+        </Empty>
+      ) : !isMultiSelectMode && selectedElement ? (
+        <div className="space-y-3">
+          {!isNodeEditable ? (
+            <div className="rounded border border-amber-500/40 bg-amber-500/10 px-2 py-1.5 text-[11px] text-amber-700 dark:text-amber-300">
+              {readonlyReason}
+            </div>
+          ) : null}
+          <fieldset disabled={!isNodeEditable} className={!isNodeEditable ? "opacity-60" : ""}>
+            <div className="space-y-3.5 text-xs">
                 <PanelConfigNodeInfo
                   element={selectedElement}
                   helpers={helpers}
@@ -449,26 +449,26 @@ export function PanelConfigSidebar({
                   nodeZOrderLabel={nodeZOrderLabel}
                   onAdjustNodeZOrder={onAdjustNodeZOrder}
                 />
-              </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">
-                {isChartElement ? (
+          </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">
+          {isChartElement ? (
                   <PanelConfigChartSection
                     element={selectedElement}
                     helpers={helpers}
@@ -476,23 +476,23 @@ export function PanelConfigSidebar({
                   />
                 ) : materialType === "table" ? (
                   helpers.renderSection(
-                    "tableConfig",
-                    t("panel.config.sectionTable"),
-                    <PanelConfigTableSection
-                      element={selectedElement}
-                      disabled={!isNodeEditable}
-                      updateElement={updateElement}
-                      blueprintNodeOptions={blueprintNodeOptions}
-                    />,
-                    true,
-                    [
-                      t("panel.material.table"),
-                      "table",
-                      t("panel.config.tableSource"),
-                      t("panel.config.tableColumns"),
-                      t("panel.config.tableRowsText"),
-                    ]
-                  )
+              "tableConfig",
+              t("panel.config.sectionTable"),
+              <PanelConfigTableSection
+                element={selectedElement}
+                disabled={!isNodeEditable}
+                updateElement={updateElement}
+                blueprintNodeOptions={blueprintNodeOptions}
+              />,
+              true,
+              [
+                t("panel.material.table"),
+                "table",
+                t("panel.config.tableSource"),
+                t("panel.config.tableColumns"),
+                t("panel.config.tableRowsText"),
+              ]
+            )
                 ) : materialType === "text" ? (
                   <PanelConfigTextSection
                     element={selectedElement}
@@ -511,7 +511,7 @@ export function PanelConfigSidebar({
                     helpers={helpers}
                     updateElement={updateElement}
                   />
-                ) : null}
+                    ) : null}
                 <PanelConfigGridChildSpan
                   element={selectedElement}
                   helpers={helpers}
@@ -525,22 +525,22 @@ export function PanelConfigSidebar({
                   />
                 ) : materialType === "scene3d" ? (
                   helpers.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"),
-                    ]
-                  )
+              "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"),
+              ]
+            )
                 ) : materialType === "grid" ? (
                   <PanelConfigGridSection
                     element={selectedElement}
@@ -564,10 +564,10 @@ export function PanelConfigSidebar({
                     setReferenceCopyMode={setReferenceCopyMode}
                   />
                 ) : materialType === "image" ? null : (
-                  <div className="text-xs leading-6 text-muted-foreground">
-                    {t("panel.config.notChartType")}
-                  </div>
-                )}
+            <div className="text-xs leading-6 text-muted-foreground">
+              {t("panel.config.notChartType")}
+            </div>
+          )}
                 <PanelConfigStyleSections
                   element={selectedElement}
                   helpers={helpers}
@@ -578,11 +578,11 @@ export function PanelConfigSidebar({
                   matchCountRef={matchCountRef}
                   label={t("panel.config.noMatch")}
                 />
-              </div>
-            </fieldset>
-          </div>
-        ) : null}
-      </aside>
+            </div>
+          </fieldset>
+        </div>
+      ) : null}
+    </aside>
     </ScopeConfigProvider>
   );
 }

package/src/panel/utils/chartOptionBuilder.ts

@@ -2,6 +2,7 @@ import type { EChartsOption } from "echarts";
 import type { PanelChartConfig, PanelElement } from "../types";
 
 const DEFAULT_CHART_VALUES = [12, 18, 9, 24];
+const DEFAULT_CHART_LABELS = ["A", "B", "C", "D"];
 
 export function getChartValuesDisplayText(chart?: PanelChartConfig): string {
   if (chart?.valuesText !== undefined) return chart.valuesText;
@@ -13,10 +14,26 @@ export function getChartLabelsDisplayText(chart?: PanelChartConfig): string {
   return (chart?.labels ?? []).join(",");
 }
 
+export function parseChartLabelsFromText(
+  text: string | undefined,
+  fallback: string[] = DEFAULT_CHART_LABELS
+): string[] {
+  if (text === undefined) return fallback;
+  const trimmed = text.trim();
+  if (!trimmed) return fallback;
+  const parts = trimmed.split(",").map((s) => s.trim()).filter(Boolean);
+  if (!parts.length) return fallback;
+  return parts;
+}
+
 export function resolveChartLabels(element: PanelElement): string[] {
   const chart = element.chart;
+  if (chart?.labelsText !== undefined) {
+    const parsed = parseChartLabelsFromText(chart.labelsText, []);
+    return parsed.length ? parsed : DEFAULT_CHART_LABELS;
+  }
   if (chart?.labels?.length) return chart.labels;
-  return ["A", "B", "C", "D"];
+  return DEFAULT_CHART_LABELS;
 }
 
 export function parseChartValuesFromText(