@orbit-work/ui 0.1.2-preview.0 → 0.1.2

package/src/utils/office-excel.ts

@@ -1,452 +0,0 @@
-/* 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

@@ -1,156 +0,0 @@
-/**
- * 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
-}