@arronqzy/vue-view 0.1.6 → 0.1.8

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

@@ -41,15 +41,19 @@ function patchStyle(patch: Partial<PanelElementStyle>) {
 }
 
 async function handleUploadBackgroundImage(file: File) {
-  const base64 = await readFileAsDataUrl(file, msgs().readImageFailed);
-  patchStyle({ backgroundImage: `url("${base64}")` });
-  uploadStatus.value = t("panel.config.uploadWrittenBase64");
-  const url = await uploadFileToRemote(file);
-  if (url) {
-    patchStyle({ backgroundImageRemoteUrl: url });
-    uploadStatus.value = t("panel.config.uploadServerAndBase64");
-  } else {
-    uploadStatus.value = t("panel.config.uploadServerFailedKeepBase64");
+  try {
+    const base64 = await readFileAsDataUrl(file, msgs().readImageFailed);
+    patchStyle({ backgroundImage: `url("${base64}")` });
+    uploadStatus.value = t("panel.config.uploadWrittenBase64");
+    const url = await uploadFileToRemote(file);
+    if (url) {
+      patchStyle({ backgroundImageRemoteUrl: url });
+      uploadStatus.value = t("panel.config.uploadServerAndBase64");
+    } else {
+      uploadStatus.value = t("panel.config.uploadServerFailedKeepBase64");
+    }
+  } catch (error) {
+    uploadStatus.value = error instanceof Error ? error.message : msgs().readImageFailed;
   }
 }
 

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

@@ -3,6 +3,7 @@ import { useI18n } from "@arronqzy/i18n/vue";
 import { onMounted, ref, watch } from "vue";
 import { Checkbox, Input, InputNumber, Select } from "ant-design-vue";
 import type { PanelElement } from "../../types";
+import { cssTextLineHeight, cssTextAlignStyle } from "../../utils/panelElementDefaults";
 import ConfigColorField from "./ConfigColorField.vue";
 import ConfigFieldGroup from "./ConfigFieldGroup.vue";
 import ConfigSection from "./ConfigSection.vue";
@@ -87,15 +88,16 @@ watch(() => [props.element.id, props.element.textHtml], syncEditorHtml);
       </div>
       <div
         ref="textEditorRef"
-        class="min-h-[120px] rounded border border-gray-200 bg-white px-2 py-1.5 text-xs leading-6 outline-none"
+        data-panel-user-text=""
+        class="min-h-[120px] rounded border border-gray-200 bg-white px-2 py-1.5 leading-6 outline-none"
         :contenteditable="isEditable"
         :style="{
           fontFamily: element.textFontFamily || undefined,
           fontSize: element.textFontSize ? `${element.textFontSize}px` : undefined,
           fontWeight: element.textFontWeight || undefined,
           color: element.textColor || undefined,
-          lineHeight: element.textLineHeight ? String(element.textLineHeight) : undefined,
-          textAlign: element.textAlign ?? 'left',
+          lineHeight: cssTextLineHeight(element.textLineHeight),
+          ...cssTextAlignStyle(element.textAlign),
         }"
         @input="(e) => {
           const nextHtml = (e.target as HTMLDivElement).innerHTML;
@@ -156,20 +158,32 @@ watch(() => [props.element.id, props.element.textHtml], syncEditorHtml);
           >
             <Select.Option value="left">{{ t("panel.config.alignLeft") }}</Select.Option>
             <Select.Option value="center">{{ t("panel.config.alignCenter") }}</Select.Option>
+            <Select.Option value="middle">{{ t("panel.config.alignMiddle") }}</Select.Option>
             <Select.Option value="right">{{ t("panel.config.alignRight") }}</Select.Option>
             <Select.Option value="justify">{{ t("panel.config.alignJustify") }}</Select.Option>
           </Select>
         </label>
         <label class="block space-y-1">
-          <div>{{ t("panel.config.lineHeight") }}</div>
+          <div class="flex items-center justify-between gap-2">
+            <span>{{ t("panel.config.lineHeight") }}</span>
+            <label class="flex items-center gap-1 font-normal">
+              <Checkbox
+                :checked="element.textLineHeight === 'auto'"
+                :disabled="!isEditable"
+                @update:checked="(v) => patch({ textLineHeight: v ? 'auto' : 1.6 })"
+              />
+              <span>{{ t("panel.config.lineHeightAuto") }}</span>
+            </label>
+          </div>
           <InputNumber
             size="small"
             class="w-full"
             :min="1"
             :max="3"
             :step="0.1"
-            :value="element.textLineHeight ?? 1.6"
-            :disabled="!isEditable"
+            :value="element.textLineHeight === 'auto' ? undefined : (element.textLineHeight ?? 1.6)"
+            :disabled="!isEditable || element.textLineHeight === 'auto'"
+            :placeholder="t('panel.config.lineHeightAuto')"
             @update:value="(v) => {
               const n = Number(v);
               if (!Number.isNaN(n)) patch({ textLineHeight: Math.min(3, Math.max(1, n)) });

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

@@ -35,15 +35,19 @@ function patch(patch: Partial<PanelElement>) {
 }
 
 async function handleUploadVideoFile(file: File) {
-  const base64 = await readFileAsDataUrl(file, msgs().readVideoFailed);
-  patch({ videoSrc: base64 });
-  videoStatus.value = msgs().videoLocalSaved;
-  const url = await uploadFileToRemote(file);
-  if (url) {
-    patch({ videoRemoteUrl: url });
-    videoStatus.value = msgs().videoRemoteUploaded;
-  } else {
-    videoStatus.value = msgs().videoServerUploadFailed;
+  try {
+    const base64 = await readFileAsDataUrl(file, msgs().readVideoFailed, "video");
+    patch({ videoSrc: base64 });
+    videoStatus.value = msgs().videoLocalSaved;
+    const url = await uploadFileToRemote(file);
+    if (url) {
+      patch({ videoRemoteUrl: url });
+      videoStatus.value = msgs().videoRemoteUploaded;
+    } else {
+      videoStatus.value = msgs().videoServerUploadFailed;
+    }
+  } catch (error) {
+    videoStatus.value = error instanceof Error ? error.message : msgs().readVideoFailed;
   }
 }
 

package/src/panel/components/config/shared.ts

@@ -1,4 +1,6 @@
 import type { PanelChartConfig } from "../../types";
+import { resolveLocale, tForLocale } from "@arronqzy/i18n";
+import { runBusyTask } from "../../utils/async-work";
 
 export function mergeOptionPatch(
   base: Record<string, unknown> | undefined,
@@ -38,29 +40,22 @@ export function sectionMatchesSearch(
   );
 }
 
-export function readFileAsDataUrl(
-  file: File,
-  errorMessage: string
-): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(String(reader.result ?? ""));
-    reader.onerror = () => reject(new Error(errorMessage));
-    reader.readAsDataURL(file);
-  });
-}
+export { readFileAsDataUrl } from "../../utils/async-work";
 
 export async function uploadFileToRemote(file: File): Promise<string | undefined> {
-  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 };
-    return data.url;
-  } catch {
-    return undefined;
-  }
+  const t = tForLocale(resolveLocale());
+  return runBusyTask(t("common.uploadingFile"), async () => {
+    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 };
+      return data.url;
+    } catch {
+      return undefined;
+    }
+  });
 }
 
 export function patchChart(

package/src/panel/components/elementsLayerNodes.ts

@@ -15,7 +15,9 @@ import * as echarts from "echarts";
 import type { PanelElement } from "../types";
 import { buildChartOption, CHART_TYPES } from "../utils/chartOptionBuilder";
 import { PREVIEW_LAYOUT_EVENT } from "../utils/panelStateIO";
+import { cssTextLineHeight, cssTextAlignStyle } from "../utils/panelElementDefaults";
 import TableNodeContent from "./table/TableNodeContent.vue";
+import Scene3dNodeContent from "@arronqzy/view-scene3d/vue";
 
 export { CHART_TYPES };
 
@@ -74,8 +76,8 @@ export const TextNodeContent = defineComponent({
       fontSize: p.element.textFontSize ? `${p.element.textFontSize}px` : undefined,
       fontWeight: p.element.textFontWeight || undefined,
       color: p.element.textColor || undefined,
-      lineHeight: p.element.textLineHeight ? String(p.element.textLineHeight) : undefined,
-      textAlign: p.element.textAlign ?? "left",
+      lineHeight: cssTextLineHeight(p.element.textLineHeight),
+      ...cssTextAlignStyle(p.element.textAlign),
     }));
     watch(
       html,
@@ -89,7 +91,8 @@ export const TextNodeContent = defineComponent({
     return () =>
       h("div", {
         ref: nodeRef,
-        class: "h-full w-full overflow-auto break-words p-2 text-sm leading-relaxed outline-none",
+        "data-panel-user-text": "",
+        class: "h-full w-full overflow-auto break-words p-2 outline-none",
         style: textStyle.value,
         contentEditable: p.editable,
         onInput: (e: Event) => emit("change", (e.currentTarget as HTMLDivElement).innerHTML),
@@ -127,31 +130,10 @@ export const GridNodeContent = defineComponent({
       });
       return set;
     });
-    const occupiedBlocks = computed(() =>
-      p.allElements
-        .filter(
-          (el) =>
-            el.parentGridId === p.element.id &&
-            el.layerId === p.element.layerId &&
-            el.gridSlotIndex !== undefined
-        )
-        .map((el) => {
-          const start = Math.max(0, Math.floor(el.gridSlotIndex ?? 0));
-          const baseRow = Math.floor(start / cols.value);
-          const baseCol = start % cols.value;
-          const rowSpan = Math.max(1, Math.min(rows.value - baseRow, Math.floor(el.gridRowSpan ?? 1)));
-          const colSpan = Math.max(1, Math.min(cols.value - baseCol, Math.floor(el.gridColSpan ?? 1)));
-          return {
-            id: el.id,
-            rowStart: baseRow + 1,
-            rowEnd: baseRow + rowSpan + 1,
-            colStart: baseCol + 1,
-            colEnd: baseCol + colSpan + 1,
-          };
-        })
-    );
     return () => {
       if (p.previewMode) return h("div", { class: "relative h-full w-full" });
+      const total = rows.value * cols.value;
+      const emptyCount = total - occupied.value.size;
       const gridStyle = {
         display: "grid",
         gridTemplateColumns: `repeat(${cols.value}, minmax(0, 1fr))`,
@@ -160,40 +142,58 @@ export const GridNodeContent = defineComponent({
         padding: `${padding.value}px`,
         boxSizing: "border-box" as const,
       };
-      return h("div", { class: "relative h-full w-full" }, [
-        h(
-          "div",
-          { class: "h-full w-full", style: gridStyle },
-          Array.from({ length: rows.value * cols.value }).map((_, idx) =>
-            h("div", {
-              key: idx,
-              class: [
-                "rounded border border-dashed",
-                occupied.value.has(idx)
-                  ? "border-primary/70 bg-primary/10"
-                  : "border-border/60 bg-muted/20",
-              ].join(" "),
-              title: occupied.value.has(idx)
-                ? t("panel.config.slotOccupied", { n: idx + 1 })
-                : t("panel.config.slotEmpty", { n: idx + 1 }),
-            })
-          )
-        ),
-        h(
-          "div",
-          { class: "pointer-events-none absolute inset-0", style: gridStyle },
-          occupiedBlocks.value.map((block) =>
-            h("div", {
-              key: block.id,
-              class: "rounded border border-primary/70 bg-primary/20",
-              style: {
-                gridColumn: `${block.colStart} / ${block.colEnd}`,
-                gridRow: `${block.rowStart} / ${block.rowEnd}`,
-              },
+      return h(
+        "div",
+        {
+          class: "pointer-events-none relative h-full w-full overflow-hidden rounded-md",
+          style:
+            emptyCount > 0
+              ? {
+                  border: "2px dashed rgba(14, 165, 233, 0.7)",
+                  background: "rgba(14, 165, 233, 0.08)",
+                }
+              : undefined,
+        },
+        [
+          h(
+            "div",
+            { class: "h-full w-full", style: gridStyle },
+            Array.from({ length: total }).map((_, idx) => {
+              const filled = occupied.value.has(idx);
+              return h(
+                "div",
+                {
+                  key: idx,
+                  class: filled
+                    ? "pointer-events-none"
+                    : "pointer-events-auto flex flex-col items-center justify-center gap-0.5 rounded-md text-[11px] font-semibold",
+                  style: filled
+                    ? undefined
+                    : {
+                        border: "2px dashed rgba(2, 132, 199, 0.85)",
+                        background: "rgba(186, 230, 253, 0.72)",
+                        color: "rgba(3, 105, 161, 0.95)",
+                      },
+                  title: filled
+                    ? t("panel.config.slotOccupied", { n: idx + 1 })
+                    : t("panel.config.slotEmpty", { n: idx + 1 }),
+                },
+                filled ? undefined : h("span", String(idx + 1))
+              );
             })
-          )
-        ),
-      ]);
+          ),
+          occupied.value.size === 0
+            ? h(
+                "div",
+                {
+                  class:
+                    "pointer-events-none absolute bottom-1.5 left-0 right-0 text-center text-[11px] font-medium text-sky-800/90",
+                },
+                t("panel.config.gridDropHint")
+              )
+            : null,
+        ]
+      );
     };
   },
 });
@@ -788,6 +788,11 @@ export const ReferenceNodeContent = defineComponent({
                         })
                       : node.materialType === "geometry"
                         ? h(GeometryNodeContent, { element: node })
+                        : node.materialType === "scene3d"
+                          ? h(Scene3dNodeContent, {
+                              config: node.scene3d,
+                              previewMode: p.previewMode,
+                            })
                         : node.materialType === "table"
                           ? h(TableNodeContent, { element: node })
                           : h("div", { class: "h-full w-full" }),

package/src/panel/components/materialSidebarData.ts

@@ -31,6 +31,7 @@ const MATERIAL_LABEL_KEYS: Record<string, string> = {
   audio: "panel.material.audio",
   reference: "panel.material.reference",
   geometry: "panel.material.geometry",
+  scene3d: "panel.material.scene3d",
   table: "panel.material.table",
 };
 
@@ -65,6 +66,7 @@ export function getDefaultCategories(t: TranslateFn): MaterialCategory[] {
         { id: "text", title: t("panel.material.text") },
         { id: "table", title: t("panel.material.table") },
         { id: "geometry", title: t("panel.material.geometry") },
+        { id: "scene3d", title: t("panel.material.scene3d") },
         { id: "grid", title: t("panel.material.grid") },
         { id: "image", title: t("panel.material.image") },
         { id: "reference", title: t("panel.material.reference") },

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

@@ -14,7 +14,7 @@ import {
   getScopeAutocompleteSuggestions,
   parseScopeAutocomplete,
   type ScopeAutocompleteState,
-} from "../../utils/scope-autocomplete";
+} from "@arronqzy/blueprint-dsl";
 
 type DropdownState = {
   input: HTMLInputElement | HTMLTextAreaElement;

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

@@ -27,6 +27,7 @@ import ConfigSection from "../config/ConfigSection.vue";
 import ConfigHintIcon from "../ConfigHintIcon.vue";
 import ConditionEditor from "./ConditionEditor.vue";
 import JsonCodeEditor from "./JsonCodeEditor.vue";
+import { readFileAsDataUrl, runBusyTask } from "../../utils/async-work";
 
 const { t } = useI18n();
 
@@ -256,29 +257,27 @@ const imageUploadHint = ref("");
 
 async function uploadImageForColumn(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 });
-    imageUploadHint.value = 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 });
-        imageUploadHint.value = 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 });
+      imageUploadHint.value = 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 });
+          imageUploadHint.value = t("panel.config.uploadServerAndBase64");
+        }
+      } catch {
+        imageUploadHint.value = t("panel.config.uploadServerFailedKeepBase64");
       }
-    } catch {
-      imageUploadHint.value = t("panel.config.uploadServerFailedKeepBase64");
-    }
-  } catch {
-    imageUploadHint.value = t("panel.messages.readImageFailed");
+    });
+  } catch (error) {
+    imageUploadHint.value =
+      error instanceof Error ? error.message : t("panel.messages.readImageFailed");
   }
 }
 
@@ -785,7 +784,7 @@ function patchProgressRuleWhen(ruleIndex: number, when: Condition) {
             </ConfigHintIcon>
           </div>
 
-          <template v-if="(selectedColumn.column.widget ?? 'text') === 'text'">
+          <template v-if="(selectedColumn.column.widget ?? 'text') !== 'image'">
             <div class="grid grid-cols-2 gap-2">
               <label class="block space-y-1">
                 <div>{{ t("panel.config.tableTextFontSize") }}</div>
@@ -934,6 +933,9 @@ function patchProgressRuleWhen(ruleIndex: number, when: Condition) {
                 </Select>
               </label>
             </div>
+          </template>
+
+          <template v-if="(selectedColumn.column.widget ?? 'text') === 'text'">
             <label class="block space-y-1">
               <div class="inline-flex items-center gap-1">
                 {{ t("panel.config.tableActionOnClick") }}
@@ -1867,11 +1869,21 @@ function patchProgressRuleWhen(ruleIndex: number, when: Condition) {
         />
       </label>
       <div class="grid grid-cols-2 gap-2">
+        <ConfigColorField
+          :label="t('panel.config.tableBodyBg')"
+          :value="(table.tableStyle?.backgroundColor as string) ?? ''"
+          :disabled="!isEditable"
+          allow-transparent
+          fallback-hex="#ffffff"
+          @update:value="(v) => updateTableStyle({ backgroundColor: v || undefined })"
+        />
         <ConfigColorField
           :label="t('panel.config.tableHeaderBg')"
-          :value="(table.headerStyle?.backgroundColor as string) ?? 'rgba(0,0,0,0.04)'"
+          :value="(table.headerStyle?.backgroundColor as string) ?? ''"
           :disabled="!isEditable"
-          @update:value="(v) => updateHeaderStyle({ backgroundColor: v || 'rgba(0,0,0,0.04)' })"
+          allow-transparent
+          fallback-hex="#f3f4f6"
+          @update:value="(v) => updateHeaderStyle({ backgroundColor: v || undefined })"
         />
         <label class="block space-y-1.5">
           <div>{{ t("panel.config.tableHeaderFontSize") }}</div>
@@ -1939,6 +1951,8 @@ function patchProgressRuleWhen(ruleIndex: number, when: Condition) {
           :label="t('panel.config.tableBgColor')"
           :value="(rule.style.backgroundColor as string) ?? '#eff6ff'"
           :disabled="!isEditable"
+          allow-transparent
+          fallback-hex="#eff6ff"
           @update:value="(v) => patchRowStyleRule(ruleIndex, { backgroundColor: v || '#eff6ff' })"
         />
       </div>

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

@@ -8,8 +8,11 @@ import {
   resolveCellDisplay,
   resolveRowDisplay,
   stylePropsToCss,
+  tableTextStyleToCss,
   resolveRawTableInput,
   resolveProgressDisplay,
+  resolveTableBodyBackground,
+  resolveTableHeaderBackground,
   type PanelTableConfig,
   type NormalizedColumn,
   type NormalizedRow,
@@ -102,7 +105,7 @@ const headerTextColor = computed(
 );
 
 const rootStyle = computed(() => ({
-  background: (config.value.tableStyle?.backgroundColor as string) || "#fff",
+  background: resolveTableBodyBackground(config.value.tableStyle?.backgroundColor),
   border:
     config.value.tableStyle?.borderWidth != null
       ? `${config.value.tableStyle.borderWidth}px solid ${config.value.tableStyle.borderColor ?? "rgba(0,0,0,0.12)"}`
@@ -126,7 +129,7 @@ const headerRowStyle = computed(() => ({
       : ("sticky" as const),
   top: 0,
   zIndex: 2,
-  background: (config.value.headerStyle?.backgroundColor as string) || "rgba(0,0,0,0.04)",
+  background: resolveTableHeaderBackground(config.value.headerStyle?.backgroundColor),
   borderBottom: "1px solid rgba(0,0,0,0.1)",
   ...headerStyle.value,
   color: headerTextColor.value,
@@ -145,7 +148,8 @@ function headerJustify(align: NormalizedColumn["align"]) {
 function cellCommonStyle(cell: CellDisplay): Record<string, string | number> {
   const style = stylePropsToCss(cell.style);
   const textOverflow = cell.widgetProps?.textStyle?.overflow ?? "ellipsis";
-  const isWrap = cell.widget === "text" && textOverflow === "wrap";
+  const isWrap =
+    textOverflow === "wrap" && cell.widget !== "image" && cell.widget !== "progress";
   return {
     ...style,
     overflow: "hidden",
@@ -189,6 +193,7 @@ const TableCellView = defineComponent({
     return (): VNode => {
       const cell = p.cell;
       const common = cellCommonStyle(cell);
+      const textCss = tableTextStyleToCss(cell.widgetProps?.textStyle);
       let node: VNode;
 
       if (cell.widget === "tag" || cell.widget === "badge") {
@@ -208,6 +213,7 @@ const TableCellView = defineComponent({
                 lineHeight: "20px",
                 color: "#fff",
                 background: bg,
+                ...textCss,
               },
             },
             [
@@ -243,6 +249,7 @@ const TableCellView = defineComponent({
                 textDecoration: "underline",
                 overflow: "hidden",
                 textOverflow: "ellipsis",
+                ...textCss,
               },
             },
             cell.text || cell.href
@@ -254,7 +261,14 @@ const TableCellView = defineComponent({
         const trackColor = cell.color ?? "#3b82f6";
         const label = h(
           "span",
-          { style: { fontSize: 11, color: "rgba(0,0,0,0.55)", flex: "0 0 auto" } },
+          {
+            style: {
+              fontSize: 11,
+              color: "rgba(0,0,0,0.55)",
+              flex: "0 0 auto",
+              ...textCss,
+            },
+          },
           cell.text
         );
 
@@ -295,8 +309,16 @@ const TableCellView = defineComponent({
                   y: "50%",
                   "dominant-baseline": "central",
                   "text-anchor": "middle",
-                  "font-size": Math.max(8, Math.round(size * 0.32)),
-                  fill: "rgba(0,0,0,0.65)",
+                  "font-size":
+                    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)",
+                  "font-family":
+                    typeof textCss.fontFamily === "string" ? textCss.fontFamily : undefined,
+                  "font-weight": textCss.fontWeight,
+                  "font-style":
+                    typeof textCss.fontStyle === "string" ? textCss.fontStyle : undefined,
                 },
                 String(Math.round(pct))
               ),
@@ -343,7 +365,7 @@ const TableCellView = defineComponent({
                 },
                 draggable: false,
               })
-            : h("span", { style: { fontSize: 11, opacity: 0.5 } }, "—"),
+            : h("span", { style: { fontSize: 11, opacity: 0.5, ...textCss } }, "—"),
         ]);
       } else if (cell.widget === "boolean") {
         const on = Boolean(cell.booleanValue);
@@ -392,22 +414,21 @@ const TableCellView = defineComponent({
               }),
             ]
           ),
-          h("span", { style: { marginLeft: 6, fontSize: 12 } }, cell.text),
+          h("span", { style: { marginLeft: 6, fontSize: 12, ...textCss } }, cell.text),
         ]);
       } else {
-        const textStyle = cell.widgetProps?.textStyle;
         const canClickText = Boolean(cell.widgetProps?.actions?.onClickBlueprintNodeId);
         node = h(
           "div",
           {
             style: {
               ...common,
-              fontFamily: textStyle?.fontFamily,
-              fontStyle: textStyle?.fontStyle,
-              textDecoration:
-                textStyle?.textDecoration === "none" ? undefined : textStyle?.textDecoration,
+              ...textCss,
               cursor: canClickText ? "pointer" : undefined,
-              color: canClickText && !(common as { color?: string }).color ? "#2563eb" : common.color,
+              color:
+                canClickText && !(common as { color?: string }).color && !textCss.color
+                  ? "#2563eb"
+                  : (textCss.color as string | undefined) ?? (common as { color?: string }).color,
             },
             onClick: (e: Event) => {
               if (!canClickText) return;
@@ -504,7 +525,7 @@ const TableRowView = defineComponent({
       </div>
     </div>
 
-    <div ref="parentRef" class="min-h-0 flex-1 overflow-auto">
+    <div ref="parentRef" class="min-h-0 flex-1 overflow-auto" style="background: transparent">
       <div
         v-if="model.rows.length === 0"
         class="flex h-full flex-col items-center justify-center gap-2 px-3 text-center text-xs text-gray-400"