@orbit-work/ui 0.1.0

package/src/components/composite/PptxRenderer/PptxSlide/index.tsx

@@ -0,0 +1,48 @@
+import { type CSSProperties, memo } from "react"
+import { ElementDispatcher } from "../ElementDispatcher"
+import { PT_TO_PX } from "../constants"
+import type { Slide } from "../types"
+import { fillToCSS, ptToPx } from "../utils"
+
+export interface PptxSlideProps {
+  slide: Slide
+  /** Slide width in pt (from parse result) */
+  slideWidth: number
+  /** Slide height in pt (from parse result) */
+  slideHeight: number
+}
+
+/**
+ * 渲染单张幻灯片：背景 + 布局元素 + 前景元素。
+ * 幻灯片在"原生像素坐标系"（pt × PT_TO_PX）中绘制，
+ * 外层容器负责通过 transform: scale() 缩放到实际显示尺寸。
+ */
+export const PptxSlide = memo(function PptxSlide({ slide, slideWidth, slideHeight }: PptxSlideProps) {
+  const widthPx = ptToPx(slideWidth)
+  const heightPx = ptToPx(slideHeight)
+
+  const containerStyle: CSSProperties = {
+    position: "relative",
+    width: widthPx,
+    height: heightPx,
+    overflow: "hidden",
+    ...fillToCSS(slide.fill),
+  }
+
+  // 如果没有背景填充，默认纸面白（DS paper token）
+  if (!slide.fill) {
+    containerStyle.background = "var(--ow-paper)"
+  }
+
+  // 合并 layoutElements（母版元素）和 elements（前景元素）
+  // layoutElements 在下层，elements 在上层
+  const allElements = [...(slide.layoutElements || []), ...(slide.elements || [])]
+
+  return (
+    <div className="text-ow-text" style={containerStyle}>
+      {allElements.map((element, i) => (
+        <ElementDispatcher key={`${element.type}-${i}`} element={element} />
+      ))}
+    </div>
+  )
+})

package/src/components/composite/PptxRenderer/constants.ts

@@ -0,0 +1,2 @@
+/** 1 pt = 96/72 px (at 96 DPI) */
+export const PT_TO_PX = 4 / 3

package/src/components/composite/PptxRenderer/elements/AudioElement/index.tsx

@@ -0,0 +1,48 @@
+import { type CSSProperties, memo } from "react"
+import type { AudioElement as AudioElementType } from "../../types"
+
+export interface AudioElementProps {
+  element: AudioElementType
+}
+
+export const AudioElement = memo(function AudioElement({ element }: AudioElementProps) {
+  const src = element.blob || ""
+
+  if (!src) {
+    return (
+      <div className="" style={placeholderStyle}>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--ow-text-3)" strokeWidth="1.5">
+          <path d="M9 18V5l12-2v13" />
+          <circle cx="6" cy="18" r="3" />
+          <circle cx="18" cy="16" r="3" />
+        </svg>
+      </div>
+    )
+  }
+
+  const style: CSSProperties = {
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+  }
+
+  return (
+    <div className="" style={style}>
+      <audio controls preload="metadata" style={{ width: "100%" }}>
+        <source src={src} />
+      </audio>
+    </div>
+  )
+})
+
+const placeholderStyle: CSSProperties = {
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: "var(--ow-surface-2)",
+  borderRadius: "var(--ow-radius-2xs)",
+}

package/src/components/composite/PptxRenderer/elements/ChartElement/index.tsx

@@ -0,0 +1,172 @@
+import { type CSSProperties, memo, useEffect, useRef, useState } from "react"
+import type { ChartElement as ChartElementType, CommonChartElement, ScatterChartElement } from "../../types"
+
+export interface ChartElementProps {
+  element: ChartElementType
+}
+
+/**
+ * 图表元素：懒加载 echarts，加载失败时展示占位符。
+ */
+export const ChartElement = memo(function ChartElement({ element }: ChartElementProps) {
+  const chartRef = useRef<HTMLDivElement>(null)
+  const instanceRef = useRef<any>(null)
+  const [loadError, setLoadError] = useState(false)
+
+  useEffect(() => {
+    let disposed = false
+
+    async function initChart() {
+      if (!chartRef.current) return
+
+      try {
+        // 动态导入 echarts（作为可选 peer dependency）
+        const echarts = await import("echarts")
+        if (disposed) return
+
+        const chart = echarts.init(chartRef.current)
+        instanceRef.current = chart
+
+        const option = buildChartOption(element)
+        chart.setOption(option)
+      } catch {
+        if (!disposed) setLoadError(true)
+      }
+    }
+
+    initChart()
+
+    return () => {
+      disposed = true
+      instanceRef.current?.dispose()
+      instanceRef.current = null
+    }
+  }, [element])
+
+  // Resize chart when container resizes
+  useEffect(() => {
+    if (!chartRef.current || !instanceRef.current) return
+    const observer = new ResizeObserver(() => {
+      instanceRef.current?.resize()
+    })
+    observer.observe(chartRef.current)
+    return () => observer.disconnect()
+  }, [loadError])
+
+  const style: CSSProperties = {
+    width: "100%",
+    height: "100%",
+  }
+
+  if (loadError) {
+    return (
+      <div
+        className=""
+        style={{
+          ...style,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "var(--ow-surface)",
+          borderRadius: "var(--ow-radius-2xs)",
+        }}
+      >
+        <span style={{ color: "var(--ow-text-3)", fontSize: 12 }}>图表</span>
+      </div>
+    )
+  }
+
+  return <div ref={chartRef} className="" style={style} />
+})
+
+function buildChartOption(element: ChartElementType): any {
+  const { chartType, colors } = element
+
+  if (chartType === "scatterChart" || chartType === "bubbleChart") {
+    return buildScatterOption(element as ScatterChartElement)
+  }
+
+  const el = element as CommonChartElement
+  const { data, barDir } = el
+
+  if (!data?.length) return {}
+
+  // Extract categories from first series' xlabels or values
+  const categories = data[0]?.values?.map((v) => v.x) || []
+  const series = data.map((item) => ({
+    name: item.key,
+    data: item.values.map((v) => v.y),
+    type: getEchartsType(chartType),
+    ...(chartType.includes("area") ? { areaStyle: {} } : {}),
+  }))
+
+  const option: any = {
+    color: colors?.length ? colors : undefined,
+    legend: { show: data.length > 1, bottom: 0, textStyle: { fontSize: 10 } },
+    grid: { left: 40, right: 20, top: 20, bottom: data.length > 1 ? 30 : 10 },
+    tooltip: { trigger: "axis" },
+    series,
+  }
+
+  if (chartType.includes("pie") || chartType === "doughnutChart") {
+    // Pie/donut chart
+    option.series = [
+      {
+        type: "pie",
+        radius: chartType === "doughnutChart" ? ["40%", "70%"] : "70%",
+        data: data[0]?.values?.map((v) => ({ name: v.x, value: v.y })) || [],
+      },
+    ]
+    delete option.grid
+    delete option.tooltip
+  } else if (chartType.includes("radar")) {
+    option.radar = {
+      indicator: categories.map((name) => ({ name })),
+    }
+    option.series = [
+      {
+        type: "radar",
+        data: data.map((item) => ({
+          name: item.key,
+          value: item.values.map((v) => v.y),
+        })),
+      },
+    ]
+    delete option.grid
+  } else {
+    // Bar/Line/Area
+    if (barDir === "bar") {
+      option.yAxis = { type: "category", data: categories }
+      option.xAxis = { type: "value" }
+    } else {
+      option.xAxis = { type: "category", data: categories }
+      option.yAxis = { type: "value" }
+    }
+  }
+
+  return option
+}
+
+function buildScatterOption(element: ScatterChartElement): any {
+  return {
+    color: element.colors?.length ? element.colors : undefined,
+    xAxis: { type: "value" },
+    yAxis: { type: "value" },
+    series: [
+      {
+        type: "scatter",
+        data: element.data || [],
+      },
+    ],
+    grid: { left: 40, right: 20, top: 20, bottom: 20 },
+  }
+}
+
+function getEchartsType(chartType: string): string {
+  if (chartType.includes("bar") || chartType.includes("Bar")) return "bar"
+  if (chartType.includes("line") || chartType.includes("Line")) return "line"
+  if (chartType.includes("area") || chartType.includes("Area")) return "line"
+  if (chartType.includes("pie") || chartType.includes("Pie")) return "pie"
+  if (chartType.includes("radar") || chartType.includes("Radar")) return "radar"
+  return "bar"
+}

package/src/components/composite/PptxRenderer/elements/DiagramElement/index.tsx

@@ -0,0 +1,46 @@
+import { memo } from "react"
+import { ElementDispatcher } from "../../ElementDispatcher"
+import type { DiagramElement as DiagramElementType } from "../../types"
+
+export interface DiagramElementProps {
+  element: DiagramElementType
+}
+
+/**
+ * SmartArt / Diagram 元素：递归渲染子元素（Shape | Text）
+ */
+export const DiagramElement = memo(function DiagramElement({ element }: DiagramElementProps) {
+  if (!element.elements?.length) {
+    // Fallback: show text list if no parsed sub-elements
+    if (element.textList?.length) {
+      return (
+        <div
+          className=""
+          style={{
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            padding: 8,
+          }}
+        >
+          {element.textList.map((text, i) => (
+            <div key={i} style={{ fontSize: 12, marginBottom: 4 }}>
+              {text}
+            </div>
+          ))}
+        </div>
+      )
+    }
+    return null
+  }
+
+  return (
+    <div className="relative w-full h-full" style={{ position: "relative", width: "100%", height: "100%" }}>
+      {element.elements.map((child, i) => (
+        <ElementDispatcher key={`diagram-${i}`} element={child} />
+      ))}
+    </div>
+  )
+})

package/src/components/composite/PptxRenderer/elements/GroupElement/index.tsx

@@ -0,0 +1,28 @@
+import { type CSSProperties, memo } from "react"
+import { ElementDispatcher } from "../../ElementDispatcher"
+import type { GroupElement as GroupElementType } from "../../types"
+import { buildTransform, ptToPx } from "../../utils"
+
+export interface GroupElementProps {
+  element: GroupElementType
+}
+
+/**
+ * 分组元素：递归渲染子元素，子元素坐标相对于 group 原点。
+ */
+export const GroupElement = memo(function GroupElement({ element }: GroupElementProps) {
+  const style: CSSProperties = {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    transform: buildTransform(element.rotate, element.isFlipH, element.isFlipV),
+  }
+
+  return (
+    <div className="" style={style}>
+      {element.elements?.map((child, i) => (
+        <ElementDispatcher key={`group-${i}`} element={child} />
+      ))}
+    </div>
+  )
+})

package/src/components/composite/PptxRenderer/elements/ImageElement/index.tsx

@@ -0,0 +1,61 @@
+import { type CSSProperties, memo } from "react"
+import type { ImageElement as ImageElementType } from "../../types"
+import { filtersToCSS, ptToPx } from "../../utils"
+
+export interface ImageElementProps {
+  element: ImageElementType
+}
+
+export const ImageElement = memo(function ImageElement({ element }: ImageElementProps) {
+  const src = element.base64
+    ? element.base64.startsWith("data:")
+      ? element.base64
+      : `data:image/png;base64,${element.base64}`
+    : element.blob || ""
+
+  if (!src) return null
+
+  const imgStyle: CSSProperties = {
+    width: "100%",
+    height: "100%",
+    objectFit: "fill",
+    display: "block",
+    ...filtersToCSS(element.filters),
+  }
+
+  // Image crop (rect) — use object-position + object-fit to simulate
+  const containerStyle: CSSProperties = {
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    borderRadius: element.borderWidth ? undefined : undefined,
+  }
+
+  if (element.borderColor && element.borderWidth) {
+    containerStyle.border = `${ptToPx(element.borderWidth)}px ${element.borderType || "solid"} ${element.borderColor}`
+  }
+
+  // Crop via object-view-box or clip-path
+  if (element.rect) {
+    const { t = 0, b = 0, l = 0, r = 0 } = element.rect
+    // rect values are fractional (0-1 range representing percentage)
+    if (t || b || l || r) {
+      imgStyle.clipPath = `inset(${t * 100}% ${r * 100}% ${b * 100}% ${l * 100}%)`
+      // Adjust size to compensate for clip
+      const scaleX = 1 / (1 - l - r)
+      const scaleY = 1 / (1 - t - b)
+      imgStyle.width = `${scaleX * 100}%`
+      imgStyle.height = `${scaleY * 100}%`
+      imgStyle.objectFit = "cover"
+      imgStyle.marginLeft = `${-l * scaleX * 100}%`
+      imgStyle.marginTop = `${-t * scaleY * 100}%`
+      imgStyle.clipPath = undefined
+    }
+  }
+
+  return (
+    <div className="" style={containerStyle}>
+      <img src={src} alt="" style={imgStyle} draggable={false} />
+    </div>
+  )
+})

package/src/components/composite/PptxRenderer/elements/MathElement/index.tsx

@@ -0,0 +1,57 @@
+import { type CSSProperties, memo } from "react"
+import type { MathElement as MathElementType } from "../../types"
+
+export interface MathElementProps {
+  element: MathElementType
+}
+
+/**
+ * 数学公式元素：使用 picBase64 fallback 图片渲染，不引入 LaTeX 渲染库。
+ */
+export const MathElement = memo(function MathElement({ element }: MathElementProps) {
+  const src = element.picBase64
+    ? element.picBase64.startsWith("data:")
+      ? element.picBase64
+      : `data:image/png;base64,${element.picBase64}`
+    : element.picBlob || ""
+
+  if (!src) {
+    // Fallback: show LaTeX source text
+    return (
+      <div className="" style={fallbackStyle}>
+        <span style={{ fontFamily: "var(--ow-font-mono)", fontSize: 12 }}>
+          {element.latex || element.text || "公式"}
+        </span>
+      </div>
+    )
+  }
+
+  const style: CSSProperties = {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  }
+
+  return (
+    <div className="" style={style}>
+      <img
+        src={src}
+        alt={element.latex || "公式"}
+        style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }}
+        draggable={false}
+      />
+    </div>
+  )
+})
+
+const fallbackStyle: CSSProperties = {
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: "var(--ow-surface-2)",
+  borderRadius: "var(--ow-radius-2xs)",
+}