@arronqzy/react-view 1.0.12 → 1.0.14

package/src/panel/components/scope-config/ScopeTemplateAutocompleteHost.tsx

@@ -7,14 +7,13 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "@arronqzy/ui";
-
 import {
   applyScopeAutocompleteSelection,
   buildScopeExpression,
   getScopeAutocompleteSuggestions,
   parseScopeAutocomplete,
   type ScopeAutocompleteState,
-} from "../../utils/scope-autocomplete";
+} from "@arronqzy/blueprint-dsl";
 
 function isAutocompleteTarget(
   target: EventTarget | null

package/src/panel/components/table/PanelConfigTableSection.tsx

@@ -17,6 +17,7 @@ import {
   generateMockTableRows,
   stringifyMockTableRows,
   type TableMockLocale,
+  isCssTransparent,
 } from "@arronqzy/view-table";
 import type { PanelElement } from "../../types";
 import { ConfigHintIcon } from "../ConfigHintIcon";
@@ -24,6 +25,7 @@ import { ConditionEditor } from "./ConditionEditor";
 import { JsonCodeEditor } from "./JsonCodeEditor";
 import { useI18n } from "@arronqzy/i18n/react";
 import React, { useMemo, useRef, useState } from "react";
+import { readFileAsDataUrl, runBusyTask } from "../../utils/async-work";
 import {
   Button,
   Dialog,
@@ -217,35 +219,34 @@ export function PanelConfigTableSection({
 
   const uploadImageForColumn = async (index: number, file: File) => {
     try {
-      const base64 = await new Promise<string>((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(String(reader.result ?? ""));
-        reader.onerror = () => reject(new Error("read failed"));
-        reader.readAsDataURL(file);
-      });
-      patchWidgetProps(index, {
-        imageUrlMode: "static",
-        imageUrl: base64,
-      });
-      setImageUploadHint(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) {
-          patchWidgetProps(index, {
-            imageUrlMode: "static",
-            imageUrl: data.url,
-          });
-          setImageUploadHint(t("panel.config.uploadServerAndBase64"));
+      await runBusyTask(t("common.uploadingFile"), async () => {
+        const base64 = await readFileAsDataUrl(file, t("panel.messages.readImageFailed"), "image");
+        patchWidgetProps(index, {
+          imageUrlMode: "static",
+          imageUrl: base64,
+        });
+        setImageUploadHint(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) {
+            patchWidgetProps(index, {
+              imageUrlMode: "static",
+              imageUrl: data.url,
+            });
+            setImageUploadHint(t("panel.config.uploadServerAndBase64"));
+          }
+        } catch {
+          setImageUploadHint(t("panel.config.uploadServerFailedKeepBase64"));
         }
-      } catch {
-        setImageUploadHint(t("panel.config.uploadServerFailedKeepBase64"));
-      }
-    } catch {
-      setImageUploadHint(t("panel.messages.readImageFailed"));
+      });
+    } catch (error) {
+      setImageUploadHint(
+        error instanceof Error ? error.message : t("panel.messages.readImageFailed")
+      );
     }
   };
 
@@ -321,27 +322,45 @@ export function PanelConfigTableSection({
     value: string,
     onChange: (next: string) => void,
     hintKey?: string,
-    placeholder = "#000000"
+    placeholder = "#000000",
+    allowTransparent = false
   ) => {
     const label = t(labelKey);
+    const transparent = allowTransparent && isCssTransparent(value);
+    const fallbackHex = placeholder.startsWith("#") ? placeholder : "#ffffff";
     return (
       <div className={fieldClass}>
         {fieldLabel(labelKey, hintKey)}
-        <div className="flex items-center gap-2">
-          <Input
-            value={value}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder={placeholder}
-            className={`${inputClass} min-w-0 flex-1`}
-          />
-          <Input
-            type="color"
-            value={toPickerHex(value, placeholder.startsWith("#") ? placeholder : "#000000")}
-            onChange={(e) => onChange(e.target.value)}
-            className="h-7 w-10 shrink-0 cursor-pointer p-1"
-            aria-label={t("common.colorPickerAria", { label })}
-          />
-        </div>
+        {allowTransparent ? (
+          <label className="flex items-center gap-2 text-[11px]">
+            <Switch
+              checked={transparent}
+              onCheckedChange={(checked) => onChange(checked ? "transparent" : fallbackHex)}
+            />
+            <span>{t("panel.config.tableBgTransparent")}</span>
+          </label>
+        ) : null}
+        {transparent ? (
+          <div className="text-[10px] text-muted-foreground">
+            {t("panel.config.tableBgTransparentHint")}
+          </div>
+        ) : (
+          <div className="flex items-center gap-2">
+            <Input
+              value={value}
+              onChange={(e) => onChange(e.target.value)}
+              placeholder={placeholder}
+              className={`${inputClass} min-w-0 flex-1`}
+            />
+            <Input
+              type="color"
+              value={toPickerHex(value, fallbackHex)}
+              onChange={(e) => onChange(e.target.value)}
+              className="h-7 w-10 shrink-0 cursor-pointer p-1"
+              aria-label={t("common.colorPickerAria", { label })}
+            />
+          </div>
+        )}
       </div>
     );
   };
@@ -705,9 +724,8 @@ export function PanelConfigTableSection({
                 </ConfigHintIcon>
               </div>
 
-              {(selectedColumn.widget ?? "text") === "text" ? (
-                <>
-                  <div className="grid grid-cols-2 gap-2">
+              {(selectedColumn.widget ?? "text") !== "image" ? (
+                <div className="grid grid-cols-2 gap-2">
                     <label className={fieldClass}>
                       {fieldLabel("panel.config.tableTextFontSize")}
                       <Input
@@ -849,6 +867,10 @@ export function PanelConfigTableSection({
                       </Select>
                     </label>
                   </div>
+              ) : null}
+
+              {(selectedColumn.widget ?? "text") === "text" ? (
+                <>
                   <label className={fieldClass}>
                     {fieldLabel("panel.config.tableActionOnClick", "panel.config.tableActionBlueprintHint")}
                     <BlueprintNodeSelect
@@ -1849,6 +1871,14 @@ export function PanelConfigTableSection({
           />
         </label>
         <div className="grid grid-cols-2 gap-2">
+          {colorField(
+            "panel.config.tableBodyBg",
+            table.tableStyle?.backgroundColor ?? "",
+            (next) => patchTableStyle({ backgroundColor: next || undefined }),
+            "panel.config.tableBodyBgHint",
+            "#ffffff",
+            true
+          )}
           {colorField(
             "panel.config.tableStyleColor",
             table.tableStyle?.color ?? "",
@@ -1875,8 +1905,9 @@ export function PanelConfigTableSection({
             "panel.config.tableHeaderBg",
             table.headerStyle?.backgroundColor ?? "",
             (next) => patchHeaderStyle({ backgroundColor: next || undefined }),
-            undefined,
-            "#f3f4f6"
+            "panel.config.tableHeaderBgHint",
+            "#f3f4f6",
+            true
           )}
           <label className={fieldClass}>
             {fieldLabel("panel.config.tableHeaderFontSize")}
@@ -1969,7 +2000,8 @@ export function PanelConfigTableSection({
                   patchTable({ rowStyleRules: next });
                 },
                 "panel.config.tableBgColorHint",
-                "#ecfccb"
+                "#ecfccb",
+                true
               )}
             </div>
         ))}

package/src/panel/components/table/TableNodeContent.tsx

@@ -5,8 +5,11 @@ import {
   resolveCellDisplay,
   resolveRowDisplay,
   stylePropsToCss,
+  tableTextStyleToCss,
   resolveRawTableInput,
   resolveProgressDisplay,
+  resolveTableBodyBackground,
+  resolveTableHeaderBackground,
   type PanelTableConfig,
   type NormalizedColumn,
   type NormalizedRow,
@@ -64,8 +67,12 @@ function TableCellView({
   };
 
   const style = stylePropsToCss(cell.style);
+  const textCss = tableTextStyleToCss(cell.widgetProps?.textStyle);
   const textOverflow = cell.widgetProps?.textStyle?.overflow ?? "ellipsis";
-  const isWrap = cell.widget === "text" && textOverflow === "wrap";
+  const isWrap =
+    textOverflow === "wrap" &&
+    cell.widget !== "image" &&
+    cell.widget !== "progress";
   const common: React.CSSProperties = {
     ...style,
     overflow: "hidden",
@@ -98,6 +105,7 @@ function TableCellView({
             lineHeight: "20px",
             color: "#fff",
             background: bg,
+            ...textCss,
           }}
         >
           {cell.widget === "badge" ? (
@@ -126,7 +134,13 @@ function TableCellView({
             e.stopPropagation();
             emit("click", cell.widgetProps?.actions?.onClickBlueprintNodeId);
           }}
-          style={{ color: "#2563eb", textDecoration: "underline", overflow: "hidden", textOverflow: "ellipsis" }}
+          style={{
+            color: "#2563eb",
+            textDecoration: "underline",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            ...textCss,
+          }}
         >
           {cell.text || cell.href}
         </a>
@@ -137,7 +151,14 @@ function TableCellView({
     const display = resolveProgressDisplay(cell.widgetProps);
     const trackColor = cell.color ?? "#3b82f6";
     const label = (
-      <span style={{ fontSize: 11, color: "rgba(0,0,0,0.55)", flex: "0 0 auto" }}>
+      <span
+        style={{
+          fontSize: 11,
+          color: "rgba(0,0,0,0.55)",
+          flex: "0 0 auto",
+          ...textCss,
+        }}
+      >
         {cell.text}
       </span>
     );
@@ -178,8 +199,15 @@ function TableCellView({
               y="50%"
               dominantBaseline="central"
               textAnchor="middle"
-              fontSize={Math.max(8, Math.round(size * 0.32))}
-              fill="rgba(0,0,0,0.65)"
+              fontSize={
+                typeof textCss.fontSize === "number"
+                  ? textCss.fontSize
+                  : Math.max(8, Math.round(size * 0.32))
+              }
+              fill={typeof textCss.color === "string" ? textCss.color : "rgba(0,0,0,0.65)"}
+              fontFamily={typeof textCss.fontFamily === "string" ? textCss.fontFamily : undefined}
+              fontWeight={textCss.fontWeight}
+              fontStyle={typeof textCss.fontStyle === "string" ? textCss.fontStyle : undefined}
             >
               {Math.round(pct)}
             </text>
@@ -227,7 +255,7 @@ function TableCellView({
             draggable={false}
           />
         ) : (
-          <span style={{ fontSize: 11, opacity: 0.5 }}>—</span>
+        <span style={{ fontSize: 11, opacity: 0.5, ...textCss }}>—</span>
         )}
       </div>
     );
@@ -275,21 +303,18 @@ function TableCellView({
             }}
           />
         </button>
-        <span style={{ marginLeft: 6, fontSize: 12 }}>{cell.text}</span>
+        <span style={{ marginLeft: 6, fontSize: 12, ...textCss }}>{cell.text}</span>
       </div>
     );
   } else {
-    const textStyle = cell.widgetProps?.textStyle;
     const canClickText = Boolean(cell.widgetProps?.actions?.onClickBlueprintNodeId);
     content = (
       <div
         style={{
           ...common,
-          fontFamily: textStyle?.fontFamily,
-          fontStyle: textStyle?.fontStyle,
-          textDecoration: textStyle?.textDecoration === "none" ? undefined : textStyle?.textDecoration,
+          ...textCss,
           cursor: canClickText ? "pointer" : undefined,
-          color: canClickText && !common.color ? "#2563eb" : common.color,
+          color: canClickText && !common.color && !textCss.color ? "#2563eb" : (textCss.color as string | undefined) ?? common.color,
         }}
         onClick={(e) => {
           if (!canClickText) return;
@@ -431,7 +456,7 @@ export function TableNodeContent({
     <div
       className="rv-table-node h-full w-full overflow-hidden"
       style={{
-        background: (tableConfig.tableStyle?.backgroundColor as string) || "#fff",
+        background: resolveTableBodyBackground(tableConfig.tableStyle?.backgroundColor),
         border:
           tableConfig.tableStyle?.borderWidth != null
             ? `${tableConfig.tableStyle.borderWidth}px solid ${tableConfig.tableStyle.borderColor ?? "rgba(0,0,0,0.12)"}`
@@ -455,7 +480,7 @@ export function TableNodeContent({
             position: tableConfig.tableStyle?.stickyHeader === false ? "relative" : "sticky",
             top: 0,
             zIndex: 2,
-            background: (tableConfig.headerStyle?.backgroundColor as string) || "rgba(0,0,0,0.04)",
+            background: resolveTableHeaderBackground(tableConfig.headerStyle?.backgroundColor),
             borderBottom: "1px solid rgba(0,0,0,0.1)",
             ...headerStyle,
             color: headerTextColor,
@@ -489,7 +514,7 @@ export function TableNodeContent({
         </div>
       ) : null}
 
-      <div ref={parentRef} className="min-h-0 flex-1 overflow-auto">
+      <div ref={parentRef} className="min-h-0 flex-1 overflow-auto" style={{ background: "transparent" }}>
         {model.rows.length === 0 ? (
           <div className="flex h-full flex-col items-center justify-center gap-2 px-3 text-center text-xs text-muted-foreground">
             <svg

package/src/panel/hooks/usePanelElements.ts

@@ -9,6 +9,7 @@ import type {
   ReferenceCopyMode,
 } from "../types";
 import { getPanelMessages } from "../constants/messages";
+import { removeViewElementScopes } from "../scope/view-scope-store";
 import {
   DEFAULT_LAYER,
   DEFAULT_LAYER_ID,
@@ -17,6 +18,7 @@ import {
   getDefaultGridConfig,
   getDefaultLayer,
   getDefaultNodeName,
+  getDefaultScene3dConfigForMaterial,
   getDefaultSizeByMaterial,
   getDefaultTextContent,
   normalizePrimaryLayer,
@@ -367,6 +369,7 @@ export function usePanelElements() {
     });
     const idSet = new Set(unlockedIds);
     if (idSet.size === 0) return;
+    const familyIds = new Set<string>();
     store.update(
       (draft) => {
         const deletedSourceIds = new Set<string>();
@@ -376,7 +379,7 @@ export function usePanelElements() {
           const props = n.props as PanelElement;
           deletedSourceIds.add(props.mappingSourceNodeId ?? props.id);
         });
-        const familyIds = new Set<string>();
+        familyIds.clear();
         (draft.root.children ?? []).forEach((n) => {
           if (!isPanelElementNode(n) || !n.props) return;
           const props = n.props as PanelElement;
@@ -389,6 +392,7 @@ export function usePanelElements() {
       },
       { meta: { type: "node.batch-delete", ids: Array.from(idSet) } }
     );
+    removeViewElementScopes([...familyIds]);
   }, [byId, layerById]);
 
   const bringElementsToFront = useCallback((ids: string[]) => {
@@ -598,6 +602,7 @@ export function usePanelElements() {
       geometryShape: materialType === "geometry" ? "rect" : undefined,
       geometryColor: materialType === "geometry" ? "#3b82f6" : undefined,
       geometryScript: undefined,
+      ...getDefaultScene3dConfigForMaterial(materialType),
       x: Math.round(x - size.width / 2),
       y: Math.round(y - size.height / 2),
       width: size.width,
@@ -1059,6 +1064,13 @@ export function usePanelElements() {
 
   const exportPanelData = useCallback(() => {
     const current = store.getState();
+    if (typeof structuredClone === "function") {
+      try {
+        return structuredClone(current) as State;
+      } catch {
+        /* fall through */
+      }
+    }
     return JSON.parse(JSON.stringify(current)) as State;
   }, []);