@orbit-work/ui 0.1.0

package/src/utils/office-excel.ts

@@ -0,0 +1,452 @@
+/* Excel → x-spreadsheet 数据转换层。
+ *
+ * 移植自 vue-office：https://github.com/501351981/vue-office
+ * core/packages/vue-excel/src/excel.js 与 core/packages/vue-excel/src/color.js
+ *
+ * 保持原有的转换语义（单元格取值、主题色/索引色解析、合并单元格、行列尺寸），
+ * 但去掉了 vue-office 的四个运行时依赖，避免为一个预览组件引入整套工具库：
+ *   - lodash    cloneDeep / get / find  →  structuredClone、可选链、Array#find
+ *   - tinycolor2                        →  rgbToHex（toHexString 本身丢弃 alpha，
+ *                                          所以这里直接取 rgb 三通道，行为一致）
+ *   - dayjs                             →  formatDate（只覆盖 numFmt 用到的几种）
+ *   - xlsx                              →  不支持 .xls，只处理 .xlsx
+ */
+
+/* 没有任何模块 import 这个 d.ts，桌面端更严格的 tsconfig 不会把它纳入程序，
+ * 只能从这里显式引一次，让两边都拿到 x-data-spreadsheet 的模块声明。 */
+/// <reference path="../types/xspreadsheet.d.ts" />
+
+/* exceljs 的内部结构（_rows / _cells / _merges / master）没有公开类型，
+ * 转换层整体在这些私有字段上工作，因此这里统一用宽松类型。 */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+const THEME_COLORS = [
+  "#FFFFFF",
+  "#000000",
+  "#BFBFBF",
+  "#323232",
+  "#4472C4",
+  "#ED7D31",
+  "#A5A5A5",
+  "#FFC000",
+  "#5B9BD5",
+  "#71AD47",
+]
+
+const INDEXED_COLORS = [
+  "#000000",
+  "#FFFFFF",
+  "#FF0000",
+  "#00FF00",
+  "#0000FF",
+  "#FFFF00",
+  "#FF00FF",
+  "#00FFFF",
+  "#000000",
+  "#FFFFFF",
+  "#FF0000",
+  "#00FF00",
+  "#0000FF",
+  "#FFFF00",
+  "#FF00FF",
+  "#00FFFF",
+  "#800000",
+  "#008000",
+  "#000080",
+  "#808000",
+  "#800080",
+  "#008080",
+  "#C0C0C0",
+  "#808080",
+  "#9999FF",
+  "#993366",
+  "#FFFFCC",
+  "#CCFFFF",
+  "#660066",
+  "#FF8080",
+  "#0066CC",
+  "#CCCCFF",
+  "#000080",
+  "#FF00FF",
+  "#FFFF00",
+  "#00FFFF",
+  "#800080",
+  "#800000",
+  "#008080",
+  "#0000FF",
+  "#00CCFF",
+  "#CCFFFF",
+  "#CCFFCC",
+  "#FFFF99",
+  "#99CCFF",
+  "#FF99CC",
+  "#CC99FF",
+  "#FFCC99",
+  "#3366FF",
+  "#33CCCC",
+  "#99CC00",
+  "#FFCC00",
+  "#FF9900",
+  "#FF6600",
+  "#666699",
+  "#969696",
+  "#003366",
+  "#339966",
+  "#003300",
+  "#333300",
+  "#993300",
+  "#993366",
+  "#333399",
+  "#333333",
+  "#000000",
+]
+
+const DEFAULT_COL_WIDTH = 80
+const DEFAULT_ROW_HEIGHT = 24
+
+export type ExcelTransferOptions = {
+  /** 最少渲染多少列，列数不足时补空列 */
+  minColLength?: number
+  /** 最少渲染多少行，默认 100 */
+  minRowLength?: number
+  /** 列宽整体偏移，用于修正字体差异导致的列宽不匹配 */
+  widthOffset?: number
+  /** 行高整体偏移 */
+  heightOffset?: number
+}
+
+// ─── 颜色 ───
+
+function hexToRgb(str: string): number[] {
+  const hex = str.replace("#", "")
+  const parts = hex.match(/../g) ?? []
+  return parts.slice(0, 3).map((part) => Number.parseInt(part, 16))
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  return `#${[r, g, b].map((n) => n.toString(16).padStart(2, "0")).join("")}`
+}
+
+function getDarkColor(color: string, level: number): string {
+  const rgb = hexToRgb(color)
+  return rgbToHex(...(rgb.map((c) => Math.floor(c * (1 - level))) as [number, number, number]))
+}
+
+function getLightColor(color: string, level: number): string {
+  const rgb = hexToRgb(color)
+  return rgbToHex(...(rgb.map((c) => Math.floor((255 - c) * level + c)) as [number, number, number]))
+}
+
+/** exceljs 的 argb 是 8 位十六进制（带 alpha）；这里丢弃 alpha 取 rgb。 */
+function transferArgbColor(originColor: unknown): string | undefined {
+  if (typeof originColor === "object") return "#000000"
+  if (typeof originColor !== "string") return undefined
+  if (/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.test(originColor)) {
+    return originColor.startsWith("#") ? originColor : `#${originColor}`
+  }
+  const argb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(originColor.trim().toLowerCase())
+  if (!argb) return undefined
+  return rgbToHex(Number.parseInt(argb[2]!, 16), Number.parseInt(argb[3]!, 16), Number.parseInt(argb[4]!, 16))
+}
+
+function transferThemeColor(themeIndex: number, tint?: number): string {
+  const base = THEME_COLORS[themeIndex]
+  if (themeIndex > 9 || !base) return "#C7C9CC"
+  if (typeof tint === "undefined") return base
+  return tint > 0 ? getLightColor(base, tint) : getDarkColor(base, Math.abs(tint))
+}
+
+function resolveColor(color: any, fallback: string): string {
+  if (typeof color === "string") return color
+  if (!color) return fallback
+  if (color.argb) return transferArgbColor(color.argb) ?? fallback
+  if (Object.prototype.hasOwnProperty.call(color, "theme")) {
+    return transferThemeColor(color.theme, color.tint)
+  }
+  if (color.indexed) return INDEXED_COLORS[color.indexed] ?? fallback
+  return fallback
+}
+
+// ─── 单元格取值 ───
+
+const WEEKDAYS_ZH = ["日", "一", "二", "三", "四", "五", "六"]
+
+function pad(n: number): string {
+  return String(n).padStart(2, "0")
+}
+
+/** 只实现 numFmt 分支实际用到的几种格式，替代 dayjs。 */
+function formatDate(value: unknown, numFmt?: string): string {
+  const date = value instanceof Date ? value : new Date(value as string)
+  if (Number.isNaN(date.getTime())) return String(value ?? "")
+
+  const y = date.getFullYear()
+  const m = date.getMonth() + 1
+  const d = date.getDate()
+
+  switch (numFmt) {
+    case "mm-dd-yy":
+      return `${y}/${pad(m)}/${pad(d)}`
+    case "[$-F800]dddd, mmmm dd, yyyy":
+      return `${y}年${m}月${d}日 周${WEEKDAYS_ZH[date.getDay()]}`
+    case 'm"月"d"日";@':
+      return `${m}月${d}日`
+    case "yyyy/m/d h:mm;@":
+    case 'm/d/yy "h":mm': {
+      // vue-office 在这两种格式下回退 8 小时：exceljs 把不带时区的 Excel 序列值
+      // 当成 UTC 解析，本地时区为 UTC+8 时会多算 8 小时。
+      const shifted = new Date(date.getTime() - 8 * 60 * 60 * 1000)
+      return `${shifted.getFullYear()}/${shifted.getMonth() + 1}/${pad(shifted.getDate())} ${pad(shifted.getHours())}:${pad(shifted.getMinutes())}`
+    }
+    case "h:mm;@":
+      return `${pad(date.getHours())}:${pad(date.getMinutes())}`
+    case "yyyy-mm-dd;@":
+    default:
+      return `${y}-${pad(m)}-${pad(d)}`
+  }
+}
+
+/** 按 numFmt 渲染数字：百分比、千分位、货币前缀、小数位。 */
+function formatNumber(value: number, numFmt: string): string {
+  if (numFmt.endsWith("%")) {
+    const precision = numFmt.match(/\.(\d+)%/)?.[1]
+    return precision ? `${(value * 100).toFixed(precision.length)}%` : `${value * 100}%`
+  }
+
+  if (!/0(\.0+)?/.test(numFmt)) return `${value}`
+
+  let prefix = ""
+  if (numFmt.startsWith("$")) prefix = "$"
+  else if (numFmt.startsWith('"¥')) prefix = "¥"
+
+  // "_" 开头的格式把 0 显示成占位短横线
+  if (value === 0 && numFmt.startsWith("_")) return "-"
+
+  const decimals = numFmt.match(/0\.(0+)(_|;|$)/)?.[1]
+  let result = value.toFixed(decimals ? decimals.length : 0)
+
+  if (numFmt.includes("#,##")) {
+    const [intPart = "", ...rest] = result.split(".")
+    const digits = intPart.split("").reverse()
+    const grouped: string[] = []
+    digits.forEach((digit, i) => {
+      grouped.push(digit)
+      // 每三位插一个分隔符，但不要插到负号前面
+      if ((i + 1) % 3 === 0 && i < digits.length - 1 && digits[i + 1] !== "-") {
+        grouped.push(",")
+      }
+    })
+    result = [grouped.reverse().join(""), ...rest].join(".")
+  }
+
+  return prefix + result
+}
+
+function getCellText(cell: any): string {
+  const { numFmt, value, type } = cell
+  switch (type) {
+    case 2: // 数字
+      try {
+        if (cell.style?.numFmt) return formatNumber(value, cell.style.numFmt)
+        return `${value}`
+      } catch {
+        return value
+      }
+    case 3: // 字符串
+      return value
+    case 4: // 日期
+      return formatDate(value, numFmt)
+    case 5: // 超链接
+      return value?.text
+    case 6: // 公式
+      return value?.result?.error ?? value?.result
+    case 8: // 富文本
+      return cell.text
+    case 9: // Boolean
+      return cell.text.toUpperCase()
+    default:
+      return value
+  }
+}
+
+// ─── 样式 ───
+
+function getStyle(cell: any): any {
+  // exceljs 的 style 对象在同样式单元格之间共享，必须先克隆再改写
+  const style: any = structuredClone(cell.style ?? {})
+
+  if (style.fill?.fgColor) {
+    style.bgcolor = resolveColor(style.fill.fgColor, "#C7C9CC")
+  }
+  if (style.font?.color) {
+    style.color = resolveColor(style.font.color, "#000000")
+  }
+
+  // exceljs 的对齐字段名转成 x-spreadsheet 认识的 align / valign
+  if (style.alignment) {
+    if (style.alignment.horizontal) style.align = style.alignment.horizontal
+    if (style.alignment.vertical) style.valign = style.alignment.vertical
+    if (style.alignment.wrapText) style.textwrap = true
+  }
+
+  if (style.border) {
+    const border: Record<string, [string, string]> = {}
+    Object.keys(style.border).forEach((position) => {
+      const origin = style.border[position]
+      border[position] = [origin.style || "thin", resolveColor(origin.color, "#000000")]
+    })
+    style.border2 = { ...style.border }
+    style.border = border
+  }
+
+  // Excel 用 pt、x-spreadsheet 用 px
+  if (typeof style.font?.size === "number") {
+    style.font.size = Math.round(style.font.size / 1.333333)
+  }
+
+  return style
+}
+
+function transferColumns(excelSheet: any, sheetData: any, options: ExcelTransferOptions): void {
+  const columns = excelSheet.columns ?? []
+  for (let i = 0; i < columns.length; i++) {
+    sheetData.cols[i.toString()] = {}
+    if (columns[i]._hidden) {
+      // x-spreadsheet 不支持 0 宽，用 0.1 近似隐藏
+      sheetData.cols[i.toString()].width = 0.1
+    } else if (columns[i].width) {
+      sheetData.cols[i.toString()].width = columns[i].width * 6 + (options.widthOffset ?? 0)
+    } else {
+      sheetData.cols[i.toString()].width = DEFAULT_COL_WIDTH + (options.widthOffset ?? 0)
+    }
+  }
+  sheetData.cols.len = Math.max(Object.keys(sheetData.cols).length, options.minColLength ?? 0)
+}
+
+// ─── x-spreadsheet 实例 ───
+
+export type SpreadsheetInstance = {
+  loadData(data: unknown): SpreadsheetInstance
+  reRender(): SpreadsheetInstance
+  sheet: { reload?: () => void }
+}
+
+type SpreadsheetFactory = (el: HTMLElement, options: Record<string, unknown>) => SpreadsheetInstance
+
+let factoryPromise: Promise<SpreadsheetFactory> | null = null
+
+/* x-data-spreadsheet 的两个消费陷阱：
+ *   1. package.json 的 main 指向 src/index.js，第 8 行 `import './index.less'`，
+ *      esbuild 解析不了 less，构建直接失败；
+ *   2. 预构建的 dist/xspreadsheet.js 是裸 webpack bundle，没有 AMD/CJS 包装，
+ *      ESM 具名/默认导出都是空对象。
+ * 所以只能深链 dist 产物、靠它自身在模块顶层执行的 `window.x_spreadsheet = ...`
+ * 拿到工厂函数。样式已经拷进 styles/xspreadsheet.css，不要再引 dist 的 css。 */
+async function loadSpreadsheetFactory(): Promise<SpreadsheetFactory> {
+  factoryPromise ??= import("x-data-spreadsheet/dist/xspreadsheet.js").then(() => {
+    const factory = (globalThis as { x_spreadsheet?: SpreadsheetFactory }).x_spreadsheet
+    if (typeof factory !== "function") {
+      factoryPromise = null
+      throw new Error("x-data-spreadsheet 加载失败")
+    }
+    return factory
+  })
+  return factoryPromise
+}
+
+/**
+ * 按 vue-office 的参数创建只读表格实例。
+ *
+ * measure 每次重绘都会被调用（x-spreadsheet 的 view.width/height 是取值函数），
+ * 传入的必须是始终可见的祖先元素尺寸 —— 渲染完成前挂载点自身是 display:none，
+ * 直接量它会得到 0。
+ */
+export async function createSpreadsheet(
+  el: HTMLElement,
+  measure: () => { width: number; height: number },
+): Promise<SpreadsheetInstance> {
+  const factory = await loadSpreadsheetFactory()
+  return factory(el, {
+    mode: "read",
+    showToolbar: false,
+    showContextmenu: false,
+    view: {
+      width: () => measure().width || 1200,
+      height: () => Math.max(measure().height, 200),
+    },
+    row: { height: 24, len: 100 },
+    col: { len: 26, width: DEFAULT_COL_WIDTH, indexWidth: 60, minWidth: 60 },
+    autoFocus: false,
+  })
+}
+
+/** 移植自 vue-office hack.js：只读模式下 x-spreadsheet 仍会渲染可编辑 input。 */
+export function readOnlyInput(root: HTMLElement | null): void {
+  if (!root) return
+  root.querySelectorAll("input").forEach((node) => {
+    if (!node.readOnly) node.readOnly = true
+  })
+  if (document.activeElement instanceof HTMLElement) document.activeElement.blur()
+}
+
+// ─── 入口 ───
+
+/** 把 exceljs Workbook 转成 x-spreadsheet 的多 sheet 数据结构。 */
+export function transferExcelToSpreadSheet(workbook: any, options: ExcelTransferOptions = {}): any[] {
+  const workbookData: any[] = []
+
+  workbook.eachSheet((sheet: any) => {
+    const sheetData: any = { name: sheet.name, styles: [], rows: {}, cols: {}, merges: [] }
+
+    // 合并单元格：x-spreadsheet 需要起始单元格上的 [跨行数, 跨列数]
+    const mergeAddresses: Array<{ startAddress: string; yRange: number; xRange: number }> = []
+    for (const range in sheet._merges) {
+      const merge = sheet._merges[range]
+      sheetData.merges.push(merge.shortRange)
+      mergeAddresses.push({
+        startAddress: merge.tl,
+        yRange: merge.model.bottom - merge.model.top,
+        xRange: merge.model.right - merge.model.left,
+      })
+    }
+
+    // Excel 常带一堆没有数据的空列，记录真实数据边界后裁掉
+    let effectiveMaxColLen = 0
+    ;(sheet._rows ?? []).forEach((row: any, rowIndex: number) => {
+      sheetData.rows[rowIndex] = { cells: {} }
+
+      if (row._hidden) {
+        sheetData.rows[rowIndex].height = 0.1
+        row._cells = []
+      } else {
+        sheetData.rows[rowIndex].height = (row.height || DEFAULT_ROW_HEIGHT) + (options.heightOffset ?? 0)
+      }
+      ;(row._cells ?? []).forEach((cell: any, colIndex: number) => {
+        sheetData.rows[rowIndex].cells[colIndex] = {}
+        effectiveMaxColLen = Math.max(effectiveMaxColLen, colIndex)
+
+        const mergeAddress = mergeAddresses.find((m) => m.startAddress === cell._address)
+        // 合并区域内的从属单元格不输出，只保留左上角那个
+        if (mergeAddress && cell.master?.address !== mergeAddress.startAddress) return
+        if (mergeAddress) {
+          sheetData.rows[rowIndex].cells[colIndex].merge = [mergeAddress.yRange, mergeAddress.xRange]
+        }
+
+        sheetData.rows[rowIndex].cells[colIndex].text = getCellText(cell)
+        sheetData.styles.push(getStyle(cell))
+        sheetData.rows[rowIndex].cells[colIndex].style = sheetData.styles.length - 1
+      })
+    })
+
+    const rowKeys = Object.keys(sheetData.rows)
+    sheetData.rows.len = Math.max(Number(rowKeys[rowKeys.length - 1] ?? -1) + 1, options.minRowLength ?? 100)
+
+    if (sheet._columns && sheet._columns.length > effectiveMaxColLen + 1) {
+      sheet._columns = sheet._columns.slice(0, effectiveMaxColLen + 1)
+    }
+    transferColumns(sheet, sheetData, options)
+    workbookData.push(sheetData)
+  })
+
+  return workbookData
+}

package/src/utils/shiki.ts

@@ -0,0 +1,156 @@
+/**
+ * Shared Shiki highlighter utilities.
+ *
+ * Provides a singleton highlighter cache (per language) and a token cache so
+ * that CodeBlock, CodeDiff, and any future Shiki-based components share the
+ * same resources without duplicating state.
+ */
+
+import type { BundledLanguage, BundledTheme, HighlighterGeneric, ThemedToken } from "shiki"
+import { createHighlighter } from "shiki"
+import { createCssVariablesTheme } from "shiki/core"
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript"
+
+// ── DS 2.0 语法主题 ──────────────────────────────────────────────────
+//
+// W5 去痕：原来这里挂的是 shiki 自带的 github-light / github-dark，两个主题都会把
+// GitHub 的 hex 直接写进 token.color，再被 CodeBlock/CodeDiff 当 inline style 贴上去
+// ——代码块渲染的是 GitHub 配色，绕开了 DS 2.0 的 --ow-syn-*；同一份「关键字/字符串/
+// 数字」语义因此在库里存了两套盘（desktop-surfaces.css 的终端高亮走 --ow-syn-*，
+// React 代码块走 GitHub）。
+//
+// 改法取「CSS 变量输出模式」：shiki 不再吐 hex，吐的是 var(--ow-shiki-token-*)。
+// 这些变量在 styles/components.css 里一次性映射到 --ow-syn-* / --ow-text / --ow-code-bg，
+// 于是主题切换由 CSS 属性驱动（§3 无双轨），两条高亮路径同盘，TS 侧零裸 hex。
+// 变量名清单由 createCssVariablesTheme 固定：foreground / background /
+// token-{comment,constant,function,inserted,keyword,link,parameter,punctuation,
+// string,string-expression}——改映射去 components.css，不要在这里补默认值。
+export const DS2_SHIKI_THEME_NAME = "orbitwork-ds2"
+
+const ds2ShikiTheme = createCssVariablesTheme({
+  name: DS2_SHIKI_THEME_NAME,
+  variablePrefix: "--ow-shiki-",
+  fontStyle: true,
+})
+
+// ── Types ────────────────────────────────────────────────────────────
+
+export interface TokenizedCode {
+  tokens: ThemedToken[][]
+  fg: string
+  bg: string
+}
+
+// ── Highlighter cache (singleton per language) ───────────────────────
+
+const highlighterCache = new Map<string, Promise<HighlighterGeneric<BundledLanguage, BundledTheme>>>()
+
+export const getHighlighter = (language: string): Promise<HighlighterGeneric<BundledLanguage, BundledTheme>> => {
+  const cached = highlighterCache.get(language)
+  if (cached) return cached
+
+  const highlighterPromise = createHighlighter({
+    langs: [language as BundledLanguage],
+    themes: [ds2ShikiTheme],
+    engine: createJavaScriptRegexEngine(),
+  })
+
+  highlighterCache.set(language, highlighterPromise)
+  return highlighterPromise
+}
+
+// ── Token cache ──────────────────────────────────────────────────────
+
+const tokensCache = new Map<string, TokenizedCode>()
+
+export const getTokensCacheKey = (code: string, language: string) => {
+  const start = code.slice(0, 100)
+  const end = code.length > 100 ? code.slice(-100) : ""
+  return `${language}:${code.length}:${start}:${end}`
+}
+
+// ── Subscriber system for async highlight results ────────────────────
+
+const subscribers = new Map<string, Set<(result: TokenizedCode) => void>>()
+
+// ── Create raw (unhighlighted) tokens for immediate display ──────────
+
+export const createRawTokens = (code: string): TokenizedCode => ({
+  bg: "transparent",
+  fg: "inherit",
+  tokens: code.split("\n").map((line) =>
+    line === ""
+      ? []
+      : [
+          {
+            color: "inherit",
+            content: line,
+          } as ThemedToken,
+        ],
+  ),
+})
+
+// ── Synchronous highlight with async callback ────────────────────────
+
+/**
+ * Attempts to return cached highlighted tokens synchronously. If not cached,
+ * kicks off async highlighting and calls `callback` when done.
+ *
+ * Returns cached `TokenizedCode` if available, otherwise `null`.
+ */
+export const highlightCode = (
+  code: string,
+  language: string,
+  callback?: (result: TokenizedCode) => void,
+): TokenizedCode | null => {
+  const tokensCacheKey = getTokensCacheKey(code, language)
+
+  // Return cached result if available
+  const cached = tokensCache.get(tokensCacheKey)
+  if (cached) return cached
+
+  // Subscribe callback
+  if (callback) {
+    if (!subscribers.has(tokensCacheKey)) {
+      subscribers.set(tokensCacheKey, new Set())
+    }
+    subscribers.get(tokensCacheKey)?.add(callback)
+  }
+
+  // Kick off async highlight
+  getHighlighter(language)
+    .then((highlighter) => {
+      const availableLangs = highlighter.getLoadedLanguages()
+      const langToUse = availableLangs.includes(language as BundledLanguage) ? language : "text"
+
+      // 单主题足够：主题差异已经交给 CSS 变量，不再需要 shiki 的双主题 --shiki-dark 通道。
+      const result = highlighter.codeToTokens(code, {
+        lang: langToUse as BundledLanguage,
+        theme: DS2_SHIKI_THEME_NAME,
+      })
+
+      const tokenized: TokenizedCode = {
+        bg: result.bg ?? "transparent",
+        fg: result.fg ?? "inherit",
+        tokens: result.tokens,
+      }
+
+      // Cache result
+      tokensCache.set(tokensCacheKey, tokenized)
+
+      // Notify subscribers
+      const subs = subscribers.get(tokensCacheKey)
+      if (subs) {
+        for (const sub of subs) {
+          sub(tokenized)
+        }
+        subscribers.delete(tokensCacheKey)
+      }
+    })
+    .catch((error) => {
+      console.error("Failed to highlight code:", error)
+      subscribers.delete(tokensCacheKey)
+    })
+
+  return null
+}