@epxing/dashboard 0.0.0-stage → 5.3.0-beta.1

package/src/layout-util.js

@@ -0,0 +1,157 @@
+// 看板移动端布局工具
+// 把 PC 端组件布局（vue-grid-layout 的 x/y/w/h）转成移动端堆叠布局：
+// 数字统计类组件半宽（一行 2 个），其它组件整行，按视觉顺序（上→下、左→右）纵向排列。
+// 运行时无 mItems 时的自动兜底、移动端设计器「按 PC 布局生成」均复用本函数。
+
+// 数字类组件在移动端固定半宽（一行 2 个）：数字统计 / 数字卡 / 流程数字 / 任务数字卡 / 数字子项等
+const DEFAULT_HALF_TYPES = [
+  'num-statistic', 'card-num', 'num',
+  'flow-num-statistic', 'flow-num-card', 'flow-num-item',
+  'task-num-card',
+  'num-item', 'num-sub-item'
+]
+// 容器类：移动端可展开成子项平铺（默认）或整块保留（item.mobileExpand === false）
+const CONTAINER_TYPES = ['dashboard-div', 'dashboard-tabs']
+
+// 移动端默认列宽：图表整行、数字类半宽，其它组件按 PC 宽度占比定档
+function mobileSpan (item, colNum, halfTypes) {
+  if (item.contentType === 'chart' || item.contentType === 'report-chart') return colNum
+  const half = Math.floor(colNum / 2)
+  if (halfTypes.includes(item.contentType)) return half
+  const w = Math.max(1, Number(item.w) || 1)
+  const ratio = w / colNum
+  if (ratio <= 1 / 3) return Math.floor(colNum / 3)
+  if (ratio <= 1 / 2) return half
+  return colNum
+}
+
+// 展开容器：mobileExpand !== false（默认拆开）时把子项提出来一起堆叠——标签页取所有页签的子项、容器取 items；
+// mobileExpand === false 则容器整块保留（当一个组件整行）。只展开一层，嵌套容器按整块处理
+function expandForMobile (items) {
+  const out = []
+  for (const item of items || []) {
+    if (!item) continue
+    if (CONTAINER_TYPES.includes(item.contentType) && item.mobileExpand !== false) {
+      // 子项 x/y 是容器内相对坐标，与外层项的绝对坐标不同坐标系：
+      // 展开时叠加容器偏移生成副本（不改原引用），排序才与 PC 视觉顺序一致，
+      // 否则容器内组件（相对 y 普遍偏小）会被整体排到页面最前、与 PC 对不上
+      const baseX = Number(item.x) || 0
+      const baseY = Number(item.y) || 0
+      const children = item.contentType === 'dashboard-tabs'
+        ? (item.items || []).reduce((acc, tab) => acc.concat((tab && tab.items) || []), [])
+        : (item.items || [])
+      for (const c of children) {
+        if (!c) continue
+        out.push({ ...c, x: (Number(c.x) || 0) + baseX, y: (Number(c.y) || 0) + baseY })
+      }
+    } else {
+      out.push(item)
+    }
+  }
+  return out
+}
+
+// 按 PC 视觉顺序（上→下、左→右）排序
+const byYX = (a, b) => ((Number(a.y) || 0) - (Number(b.y) || 0)) || ((Number(a.x) || 0) - (Number(b.x) || 0))
+
+// 贪心堆叠：spanOf 定每项列宽（夹在 [1, colNum]），整行组件独占一行、其余并排放满即换行；每项高度不足 minH 兜底。
+// 返回新对象（带算好的 x/y/w/h），供「按 PC 生成」按占比定宽、「排序快捷键」按各自当前宽重排两处复用
+function packStack (list, colNum, spanOf, minH) {
+  const result = []
+  let y = 0
+  let curX = 0 // 当前行已用宽度
+  let rowH = 0 // 当前行最大高度
+  // 收尾当前行：把 y 推到行底、重置行状态
+  const closeRow = () => {
+    if (curX > 0) { y += rowH; curX = 0; rowH = 0 }
+  }
+  for (const item of list) {
+    const h = Math.max(Number(item.h) || minH, minH)
+    const span = Math.max(1, Math.min(colNum, spanOf(item)))
+    if (span >= colNum) {
+      // 整行组件：先收尾当前多列行，再独占一整行
+      closeRow()
+      result.push({ ...item, x: 0, y, w: colNum, h })
+      y += h
+    } else {
+      // 半宽 / 三分之一：当前行放不下就换行，再并排放入
+      if (curX + span > colNum) closeRow()
+      result.push({ ...item, x: curX, y, w: span, h })
+      curX += span
+      rowH = Math.max(rowH, h)
+    }
+  }
+  closeRow()
+  return result
+}
+
+/**
+ * PC 布局 → 移动端单列堆叠：容器按 mobileExpand 展开/保留 → 按 y、x 排序（保留 PC 上的相邻关系）→
+ * 图表整行、数字类半宽，其它组件按 PC 宽度占比定档 → 贪心填充成多列，放不下换行。
+ * 不复制 PC 的 style：mItems 项作为移动端样式覆盖层，未覆盖的键运行时沿用 PC（见 Dashboard.compStyle）。
+ * @param {Array} items 顶层组件数组，每项含 contentType 及 x/y/w/h（容器含 items）
+ * @param {number} colNum 移动端列数（与运行态移动端网格一致，默认 48）
+ * @param {Object} options { minH 最小行高, halfTypes 固定半宽的类型, keepStyle 保留各项 style（容器内部堆叠用：容器里没有「移动端样式覆盖层」，子项样式直接沿用） }
+ * @returns {Array} 移动端布局项（x/y/w/h 已按堆叠算好；默认不含 style）
+ */
+export function stackMobileLayout (items = [], colNum = 48, options = {}) {
+  const { minH = 3, halfTypes = DEFAULT_HALF_TYPES, keepStyle = false } = options
+  const stripStyle = ({ style, ...rest }) => {
+    // 保留容器的子项也不复制 PC 样式，否则以后 PC 改色会被旧快照覆盖。
+    if (Array.isArray(rest.items)) rest.items = rest.items.map(stripStyle)
+    return rest
+  }
+  const flat = expandForMobile(items)
+    .map(keepStyle ? item => item : stripStyle)
+    .sort(byYX)
+  // 经 expandForMobile 后仍在列表里的容器都是「整块保留」的：无条件独占整行，不按 PC 宽度占比定档
+  // （PC 上一个三分之一宽的小容器，保留后若仍按占比给三分之一档，手机上就挤成一条）
+  const spanOf = item => (CONTAINER_TYPES.includes(item.contentType) ? colNum : mobileSpan(item, colNum, halfTypes))
+  return packStack(flat, colNum, spanOf, minH)
+}
+
+/**
+ * 移动端设计器「排序快捷键」：把某项在阅读序（y、x）里前移 / 后移 / 置顶 / 置底，再按各项当前列宽重新堆叠。
+ * 保留每项已设的列宽 w 与高度 h，只重算 x/y；返回按新序堆叠好的新数组（调用方据 id 把 x/y 写回原项即可，保持引用）。
+ * @param {Array} items 参与排序的移动端项（通常是可见项，隐藏项不参与）
+ * @param {string} id 要移动的项 id
+ * @param {string} dir 'top' | 'up' | 'down' | 'bottom'
+ * @param {number} colNum 移动端列数
+ * @param {Object} options { minH 最小行高 }
+ * @returns {Array} 重排后的项（新对象，x/y 已重算）
+ */
+export function reorderStack (items = [], id, dir, colNum = 48, options = {}) {
+  const { minH = 3 } = options
+  const order = (items || []).filter(Boolean).slice().sort(byYX)
+  const i = order.findIndex(it => String(it.id) === String(id))
+  if (i < 0) return packStack(order, colNum, item => Math.max(1, Number(item.w) || 1), minH)
+  const [moved] = order.splice(i, 1)
+  if (dir === 'top') order.unshift(moved)
+  else if (dir === 'bottom') order.push(moved)
+  else if (dir === 'down') order.splice(Math.min(order.length, i + 1), 0, moved)
+  else order.splice(Math.max(0, i - 1), 0, moved) // 默认按 up 处理：与上一项换位
+  return packStack(order, colNum, item => Math.max(1, Number(item.w) || 1), minH)
+}
+
+/**
+ * 网格项字段兜底：grid-layout-plus 校验 layout 每项的 x/y/w/h 必须是 number，
+ * 缺一个就整块抛 `VueGridLayout: Layout[0].x must be a number!`，看板整页不渲染。
+ * 历史数据（早期看板、手工改过的配置）里这些字段可能缺失或存成了字符串，这里就地补齐。
+ * 就地改而不是返回新对象：调用方拿到的是 props 里那份数组的元素，与既有 `item.i = item.id` 写法一致。
+ * @param {Object} item 网格项
+ * @param {Object} defaults 缺省值，按需覆盖 { x, y, w, h }
+ * @returns {Object} 传入的同一个对象
+ */
+export function normalizeGridItem (item, defaults = {}) {
+  if (!item || typeof item !== 'object') return item
+  // i 与 id 重复已不再持久化，运行时用 id 兜底供 grid-layout 使用
+  if (item.i == null && item.id != null) item.i = item.id
+  const fallback = { x: 0, y: 0, w: 1, h: 1, ...defaults }
+  for (const key of ['x', 'y', 'w', 'h']) {
+    const raw = item[key]
+    // 字符串数字（'3'）也要转成数字：grid-layout 校验的是 typeof === 'number'，不是能不能转
+    const num = (raw == null || raw === '') ? NaN : Number(raw)
+    item[key] = Number.isFinite(num) ? num : fallback[key]
+  }
+  return item
+}

package/src/mobile-design.js

@@ -0,0 +1,50 @@
+import { stackMobileLayout } from './layout-util'
+import { normalizeMobileAppearance } from '@epxing/utils/src/mobile-chart-appearance'
+
+export function indexDashboardItems (items = [], result = new Map()) {
+  for (const item of items) {
+    if (!item) continue
+    if (item.id != null) result.set(String(item.id), item)
+    if (Array.isArray(item.items)) indexDashboardItems(item.items, result)
+  }
+  return result
+}
+
+// 移动端项仅决定几何、隐藏及外观；报表引用和业务配置始终取当前 PC 项。
+export function resolveMobileItem (item, pcIndex) {
+  const pc = pcIndex.get(String(item.id)) || item
+  const styleOverride = Object.fromEntries(Object.entries(item.style || {}).filter(([, value]) => value !== '' && value !== undefined && value !== null))
+  const resolved = {
+    ...pc,
+    x: item.x,
+    y: item.y,
+    w: item.w,
+    h: item.h,
+    i: item.i || item.id,
+    mobileHidden: item.mobileHidden,
+    mobileAppearance: normalizeMobileAppearance(item.mobileAppearance),
+    style: { ...(pc.style || {}), ...styleOverride }
+  }
+  if (Array.isArray(pc.items)) {
+    const saved = indexDashboardItems(item.items || [])
+    resolved.items = pc.items.map(child => resolveMobileItem(saved.get(String(child.id)) || child, pcIndex))
+  }
+  return resolved
+}
+
+// 重置几何时按组件身份保留移动端样式、隐藏及图表覆盖，也支持容器拆开/合并。
+export function regenerateMobileDesign (pcItems, mobileItems, colNum = 48) {
+  const saved = indexDashboardItems(mobileItems)
+  const preserve = item => {
+    const old = saved.get(String(item.id))
+    const next = { ...item }
+    if (old) {
+      for (const key of ['style', 'mobileHidden', 'mobileAppearance']) {
+        if (old[key] !== undefined) next[key] = key === 'mobileAppearance' ? normalizeMobileAppearance(old[key]) : old[key]
+      }
+    }
+    if (Array.isArray(item.items)) next.items = item.items.map(preserve)
+    return next
+  }
+  return stackMobileLayout(pcItems, colNum).map(preserve)
+}

package/src/theme-style.js

@@ -0,0 +1,185 @@
+// 仪表盘主题样式构建工具
+// 将 FM_CHART_THEME.CONTENT / $configs.themeStyles 的 JSON 配置编译为注入页面的 CSS 文本，
+// 同时生成图表组件的 ECharts 公共配置。
+// 配置结构与字段说明见 docs/dashboard-theme-config.md
+
+const kebabCase = key => key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+const camelCase = key => key.replace(/-(\w)/g, (s, c) => c.toUpperCase())
+
+// 装饰条（伪元素）默认定位，topAccent 配置里的同名键可覆盖
+const ACCENT_BASE = {
+  content: "''",
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  right: '0',
+  height: '3px',
+  'pointer-events': 'none'
+}
+
+/**
+ * 将样式组对象序列化为 CSS 声明文本
+ * - 键自动转 kebab-case（borderRadius 与 border-radius 均可）
+ * - 空值（''/null/undefined）跳过，避免产生 url(undefined) 等垃圾声明
+ * - background-image 视为文件路径，经 getFileUrl 包装为 url(...)；渐变请写在 background 键
+ */
+export function formatStyleToCss (style, getFileUrl) {
+  if (!style) return ''
+  return Object.keys(style)
+    .filter(key => style[key] !== '' && style[key] !== null && style[key] !== undefined)
+    .map(key => {
+      const cssKey = kebabCase(key)
+      if (cssKey === 'background-image') {
+        return `${cssKey}: url(${getFileUrl(style[key])});`
+      }
+      return `${cssKey}: ${style[key]};`
+    })
+    .join('\n')
+}
+
+/**
+ * 将 hoverStyle 拍平为单层 CSS 声明对象，兼容两种写法：
+ * - 样式组结构（面板"悬浮"态产出）：{ background:{...}, border:{...}, fontStyle:{...} }
+ * - 扁平 CSS（手写）：{ transform: '...', 'box-shadow': '...' }
+ */
+function flattenStyleGroups (style) {
+  if (!style || typeof style !== 'object') return null
+  const flat = {}
+  for (const key in style) {
+    const value = style[key]
+    if (value && typeof value === 'object') {
+      Object.assign(flat, value) // 样式组：并入其内部 CSS 声明
+    } else if (value !== '' && value !== null && value !== undefined) {
+      flat[key] = value // 扁平 CSS 声明
+    }
+  }
+  return flat
+}
+
+/**
+ * 根据主题配置生成完整 CSS 文本
+ * @param {Object} themeStyles 主题配置（page/component/num/chart/custom 分区）
+ * @param {String} scope 作用域选择器，如 `.epx-dashboard-xxx`
+ * @param {Function} getFileUrl 文件路径转 URL
+ * @param {Object} options containerSelector - page.background 的目标选择器（运行时为容器，设计器为根节点）；
+ *   hoverAncestor - 悬浮触发祖先（设计器组件被 pointer-events:none，自身 :hover 不触发，传 '.drag-component' 改用祖先触发）
+ */
+// 生成 page/component/num 三个样式分区的 CSS 规则数组（base 与 mobile 覆盖层都复用）
+function collectStyleRules (parts, scope, getFileUrl, options = {}) {
+  const { containerSelector = '.epx-dashboard__container', hoverAncestor = '' } = options
+  const { page = {}, component = {}, num = {} } = parts
+  const rules = []
+  const addRule = (selector, ...styleGroups) => {
+    const css = styleGroups.map(group => formatStyleToCss(group, getFileUrl)).filter(Boolean).join('\n')
+    if (css) rules.push(`${selector} {\n${css}\n}`)
+  }
+  // 顶部装饰条：用 ::before 伪元素绘制，宿主自动加 relative + hidden
+  const addAccent = (selector, accent) => {
+    if (!accent || !Object.keys(accent).length) return
+    addRule(selector, { position: 'relative', overflow: 'hidden' })
+    addRule(`${selector}::before`, { ...ACCENT_BASE, ...accent })
+  }
+  // 悬浮触发选择器：运行时用元素自身 :hover；设计器组件被 pointer-events:none，改用祖先 :hover 触发
+  const hoverSel = (elementSel) => hoverAncestor
+    ? `${scope} ${hoverAncestor}:hover ${elementSel}`
+    : `${scope} ${elementSel}:hover`
+  // 悬浮文字：标题/数字带行内样式（:style），普通 CSS 选择器盖不过，用 !important 覆盖。
+  // 注意：图表正文为 ECharts canvas 渲染，CSS 无法改色，hover 改不动图表文字。
+  const addHoverFont = (elementSel, hoverStyle, selectors) => {
+    const font = hoverStyle && hoverStyle.fontStyle
+    if (!font || !Object.keys(font).length) return
+    const css = Object.keys(font)
+      .filter(key => font[key] !== '' && font[key] !== null && font[key] !== undefined)
+      .map(key => `${kebabCase(key)}: ${font[key]} !important;`)
+      .join('\n')
+    const base = hoverSel(elementSel)
+    if (css) rules.push(`${selectors.map(s => `${base} ${s}`).join(', ')} {\n${css}\n}`)
+  }
+
+  // 页面
+  addRule(`${scope} ${containerSelector}`.trim(), page.background)
+  // 图表组件卡片
+  addRule(`${scope} .epx-dashboard__component`, component.background, component.border, component.fontStyle, component.shadow)
+  addRule(hoverSel('.epx-dashboard__component'), flattenStyleGroups(component.hoverStyle))
+  addHoverFont('.epx-dashboard__component', component.hoverStyle, ['.epx-chart__title', '.epx-card-num__title', '.epx-card-num__num font'])
+  addAccent(`${scope} .epx-dashboard__component`, component.topAccent)
+  addRule(`${scope} .epx-chart__header`, component.titleBackground)
+  addRule(`${scope} .epx-chart__title, ${scope} .epx-card-num__title`, component.titleFontStyle)
+  // 数字统计卡片
+  addRule(`${scope} .epx-card-num`, num.background, num.border, num.shadow)
+  addRule(hoverSel('.epx-card-num'), flattenStyleGroups(num.hoverStyle))
+  addHoverFont('.epx-card-num', num.hoverStyle, ['.epx-card-num__title', '.epx-card-num__num font'])
+  addAccent(`${scope} .epx-card-num`, num.topAccent)
+  addRule(`${scope} .epx-card-num__title`, num.titleFontStyle)
+  addRule(`${scope} .epx-card-num__num font`, num.fontStyle)
+  return rules
+}
+
+export function buildThemeCss (themeStyles = {}, scope, getFileUrl, options = {}) {
+  const rules = collectStyleRules(themeStyles, scope, getFileUrl, options)
+
+  // 自定义 CSS 逃生舱：& 占位符替换为当前仪表盘作用域，可写伪元素/hover/nth-child 等任意规则
+  const customCss = themeStyles.customCss || (themeStyles.custom && themeStyles.custom.css)
+  if (typeof customCss === 'string' && customCss.trim()) {
+    rules.push(customCss.replace(/&/g, scope))
+  }
+
+  // 移动端覆盖层：mobile 分区只写要覆盖的键，包进 @media；未覆盖的键靠 CSS 级联继承 PC（断点与 $isMobile 的 992 对齐）
+  if (themeStyles.mobile && typeof themeStyles.mobile === 'object') {
+    const mobileRules = collectStyleRules(themeStyles.mobile, scope, getFileUrl, options)
+    if (mobileRules.length) {
+      rules.push(`@media only screen and (max-width: 992px) {\n${mobileRules.join('\n')}\n}`)
+    }
+    // 设计器预览：同一套移动端规则再以 .is-mobile-preview 类作用域输出，桌面宽画布也能预览（根节点加该类即生效）
+    if (options.mobilePreview) {
+      rules.push(...collectStyleRules(themeStyles.mobile, `${scope}.is-mobile-preview`, getFileUrl, options))
+    }
+  }
+  return rules.join('\n')
+}
+
+/**
+ * 由主题配置生成 ECharts 公共配置（图表组件的 themeChartConfig）
+ * - component.fontStyle -> 全局文字 / 图例 / 坐标轴标签
+ * - chart.colors -> 系列色板（数组或逗号分隔字符串）
+ * - chart.splitLineColor / chart.axisLineColor -> 网格分割线 / 轴线颜色
+ * @param {Boolean} isMobile 为 true 时按键合并 themeStyles.mobile 的 component.fontStyle / chart.*（图表走 JS，不走 @media）
+ */
+export function buildThemeChartConfig (themeStyles = {}, isMobile = false) {
+  const baseComponent = themeStyles.component || {}
+  const baseChart = themeStyles.chart || {}
+  const mobile = (isMobile && themeStyles.mobile) || {}
+  // 移动端覆盖：fontStyle 深合并（移动端只写的键覆盖），chart 各项浅合并
+  const fontStyle = { ...(baseComponent.fontStyle || {}), ...((mobile.component || {}).fontStyle || {}) }
+  const chart = { ...baseChart, ...(mobile.chart || {}) }
+  const config = {}
+  if (Object.keys(fontStyle).length) {
+    const textStyle = {}
+    for (const key in fontStyle) {
+      textStyle[camelCase(key)] = fontStyle[key]
+    }
+    Object.assign(config, {
+      textStyle,
+      legend: { textStyle },
+      xAxis: { axisLabel: { ...textStyle } },
+      yAxis: { axisLabel: { ...textStyle } }
+    })
+  }
+  const colors = typeof chart.colors === 'string'
+    ? chart.colors.split(/[,，\s]+/).filter(Boolean)
+    : chart.colors
+  if (Array.isArray(colors) && colors.length) {
+    config.color = colors
+  }
+  if (chart.splitLineColor) {
+    const splitLine = { lineStyle: { color: chart.splitLineColor } }
+    config.xAxis = { ...config.xAxis, splitLine: { ...splitLine } }
+    config.yAxis = { ...config.yAxis, splitLine: { ...splitLine } }
+  }
+  if (chart.axisLineColor) {
+    const axisLine = { lineStyle: { color: chart.axisLineColor } }
+    config.xAxis = { ...config.xAxis, axisLine: { ...axisLine } }
+    config.yAxis = { ...config.yAxis, axisLine: { ...axisLine } }
+  }
+  return config
+}

package/types/div.d.ts

@@ -0,0 +1 @@
+export { DashboardDiv as default } from './index'

package/types/index.d.ts

@@ -0,0 +1,7 @@
+import type { App, DefineComponent, Plugin } from 'vue'
+export declare const Dashboard: DefineComponent<any, any, any> & Plugin
+export declare const DashboardTabs: DefineComponent<any, any, any>
+export declare const DashboardTitle: DefineComponent<any, any, any>
+export declare const DashboardDiv: DefineComponent<any, any, any>
+export declare const DashboardWidget: DefineComponent<any, any, any>
+export default Dashboard

package/types/tabs.d.ts

@@ -0,0 +1 @@
+export { DashboardTabs as default } from './index'

package/types/title.d.ts

@@ -0,0 +1 @@
+export { DashboardTitle as default } from './index'

package/types/widget.d.ts

@@ -0,0 +1 @@
+export { DashboardWidget as default } from './index'