misp-ui-library-test 0.0.1

package/src/packages/status-timeline-chart/src/option-builder.js

@@ -0,0 +1,475 @@
+/**
+ * ECharts 状态时序图（甘特条）配置构建
+ */
+import { merge } from '../../../utils/lodash'
+import { DEFAULT_STATUS_COLOR_PALETTE } from './constants'
+
+/**
+ * @param {string|number} rootDateTime 根开始时间，如 "2026-04-17 00:00:00"
+ * @param {string} timePart 片段开始/结束，可为 "HH:mm:ss" 或完整日期时间
+ * @returns {number} 毫秒时间戳
+ */
+export function toTimestamp(rootDateTime, timePart) {
+  if (timePart == null || timePart === '') return NaN
+  const t = String(timePart).trim()
+  if (Number.isFinite(Number(t)) && String(t) === String(Number(t))) {
+    return Number(t)
+  }
+  if (t.includes('T') || (t.includes('-') && t.split('-').length >= 3 && t.length >= 10)) {
+    const ms = new Date(t.replace(/-/g, '/')).getTime()
+    return ms
+  }
+  const datePart = String(rootDateTime || '').split(/\s+/)[0] || ''
+  if (!datePart) {
+    const ms = new Date(t.replace(/-/g, '/')).getTime()
+    return ms
+  }
+  return new Date(`${datePart} ${t}`.replace(/-/g, '/')).getTime()
+}
+
+/**
+ * @param {number} seconds
+ * @returns {string} 如 1小时0分0秒
+ */
+export function formatDurationZh(seconds) {
+  const s = Math.max(0, Math.floor(Number(seconds) || 0))
+  const h = Math.floor(s / 3600)
+  const m = Math.floor((s % 3600) / 60)
+  const sec = s % 60
+  return `${h}小时${m}分${sec}秒`
+}
+
+function buildColorResolver(yAxis, colorMap, presetColors) {
+  const map =
+    colorMap && typeof colorMap === 'object' && !Array.isArray(colorMap) ? { ...colorMap } : {}
+  const palette =
+    Array.isArray(presetColors) && presetColors.length ? presetColors : DEFAULT_STATUS_COLOR_PALETTE
+
+  return statusCode => {
+    const key = String(statusCode)
+    if (map[key] != null && map[key] !== '') return map[key]
+    const idx = yAxis.findIndex(y => String(y.statusCode) === key)
+    if (idx >= 0) return palette[idx % palette.length]
+    let hash = 0
+    for (let i = 0; i < key.length; i++) hash = (hash + key.charCodeAt(i) * (i + 1)) % palette.length
+    return palette[Math.abs(hash) % palette.length]
+  }
+}
+
+function clipRange(start, end, winStart, winEnd) {
+  const s = Math.max(start, winStart)
+  const e = Math.min(end, winEnd)
+  if (e <= s) return null
+  return { start: s, end: e }
+}
+
+/**
+ * 将矩形裁剪到笛卡尔坐标系网格内，避免 DataZoom / 滚轮缩放后 custom 图形溢出画布
+ * @param {{ x: number, y: number, width: number, height: number }} shape
+ * @param {{ x: number, y: number, width: number, height: number }} gridRect coordSys
+ * @returns {{ x: number, y: number, width: number, height: number } | null}
+ */
+function clipRectToGrid(shape, gridRect) {
+  if (
+    !gridRect ||
+    gridRect.width == null ||
+    gridRect.height == null ||
+    gridRect.x == null ||
+    gridRect.y == null
+  ) {
+    return shape
+  }
+  const x1 = Math.max(shape.x, gridRect.x)
+  const y1 = Math.max(shape.y, gridRect.y)
+  const x2 = Math.min(shape.x + shape.width, gridRect.x + gridRect.width)
+  const y2 = Math.min(shape.y + shape.height, gridRect.y + gridRect.height)
+  const w = x2 - x1
+  const h = y2 - y1
+  if (w < 0.5 || h < 0.5) return null
+  return { x: x1, y: y1, width: w, height: h }
+}
+
+function normalizeSummaries(payload, maxSegments) {
+  const { startTime, summaries = [] } = payload || {}
+  const list = (Array.isArray(summaries) ? summaries : [])
+    .map((s, i) => {
+      const st = toTimestamp(startTime, s.startTime)
+      const en = toTimestamp(startTime, s.endTime)
+      return {
+        ...s,
+        _i: i,
+        _start: st,
+        _end: en
+      }
+    })
+    .filter(s => Number.isFinite(s._start) && Number.isFinite(s._end) && s._end > s._start)
+    .sort((a, b) => a._start - b._start)
+
+  if (list.length > maxSegments) {
+    if (typeof console !== 'undefined' && console.warn) {
+      console.warn(
+        `[UiStatusTimelineChart] summaries 条数 ${list.length} 超过 maxSegments=${maxSegments}，已截断以保障性能`
+      )
+    }
+    return list.slice(-maxSegments)
+  }
+  return list
+}
+
+function buildSummaryLaneItems(sorted, rangeStart, rangeEnd, yIndex, colorResolver, gapColor, fillGaps) {
+  const items = []
+  if (!fillGaps) {
+    for (const seg of sorted) {
+      const clipped = clipRange(seg._start, seg._end, rangeStart, rangeEnd)
+      if (!clipped) continue
+      items.push({
+        value: [yIndex, clipped.start, clipped.end],
+        itemStyle: { color: colorResolver(seg.statusCode) },
+        segmentRaw: seg,
+        isGap: false
+      })
+    }
+    return items
+  }
+
+  let cursor = rangeStart
+  for (const seg of sorted) {
+    const st = seg._start
+    const en = seg._end
+    if (st > cursor) {
+      const g0 = clipRange(cursor, st, rangeStart, rangeEnd)
+      if (g0) {
+        items.push({
+          value: [yIndex, g0.start, g0.end],
+          itemStyle: { color: gapColor },
+          isGap: true
+        })
+      }
+    }
+    const clipped = clipRange(st, en, rangeStart, rangeEnd)
+    if (clipped) {
+      items.push({
+        value: [yIndex, clipped.start, clipped.end],
+        itemStyle: { color: colorResolver(seg.statusCode) },
+        segmentRaw: seg,
+        isGap: false
+      })
+    }
+    cursor = Math.max(cursor, en)
+  }
+  if (cursor < rangeEnd) {
+    const g1 = clipRange(cursor, rangeEnd, rangeStart, rangeEnd)
+    if (g1) {
+      items.push({
+        value: [yIndex, g1.start, g1.end],
+        itemStyle: { color: gapColor },
+        isGap: true
+      })
+    }
+  }
+  return items
+}
+
+function buildStatusLaneItems(sorted, rangeStart, rangeEnd, yIndex, statusCode, colorResolver) {
+  const code = String(statusCode)
+  const items = []
+  for (const seg of sorted) {
+    if (String(seg.statusCode) !== code) continue
+    const clipped = clipRange(seg._start, seg._end, rangeStart, rangeEnd)
+    if (!clipped) continue
+    items.push({
+      value: [yIndex, clipped.start, clipped.end],
+      itemStyle: { color: colorResolver(seg.statusCode) },
+      segmentRaw: seg,
+      isGap: false
+    })
+  }
+  return items
+}
+
+function defaultDataZoom() {
+  return [
+    {
+      type: 'inside',
+      xAxisIndex: 0,
+      filterMode: 'weakFilter',
+      zoomOnMouseWheel: true,
+      moveOnMouseMove: true
+    },
+    {
+      type: 'slider',
+      xAxisIndex: 0,
+      height: 22,
+      bottom: 6,
+      filterMode: 'weakFilter'
+    }
+  ]
+}
+
+/**
+ * @param {object} params
+ * @returns {object} ECharts option
+ */
+export function buildStatusTimelineOption(params) {
+  const {
+    payload,
+    showSummary = true,
+    summaryLabel = '汇总',
+    displayLegend = true,
+    /** 状态图例项数大于该值时启用 ECharts `scroll` 图例，单行可视约 N 项，两侧出现左右翻页箭头 */
+    legendMaxItemsPerRow = 6,
+    /** 估算每项图例占用宽度（px），用于计算 scroll 模式下的 `legend.width` */
+    legendItemApproxWidth = 88,
+    /** 覆盖 scroll 模式下的图例宽度（px 或百分比字符串）；不传则按 `legendMaxItemsPerRow * legendItemApproxWidth + 按钮区` 估算 */
+    legendScrollWidth = null,
+    legendOption = {},
+    colorMap = {},
+    presetColors = DEFAULT_STATUS_COLOR_PALETTE,
+    dataZoom: dataZoomUser,
+    enableDataZoom = true,
+    xAxisOption = {},
+    yAxisOption = {},
+    grid: gridUser = {},
+    gapColor = '#E4E7ED',
+    fillSummaryGaps = true,
+    tooltipFormatter,
+    dynamicWindowMs = null,
+    animationDuration = 300,
+    animationDurationUpdate = 600,
+    echartsOption = {},
+    categories: categoriesOverride
+  } = params
+
+  const yAxis = Array.isArray(payload && payload.yAxis) ? payload.yAxis : []
+  const startTime = payload && payload.startTime
+  const endTime = payload && payload.endTime
+  let rangeStart = toTimestamp(startTime, startTime)
+  let rangeEnd = toTimestamp(startTime, endTime)
+
+  if (!Number.isFinite(rangeStart) || !Number.isFinite(rangeEnd)) {
+    return {
+      _invalid: true
+    }
+  }
+  if (rangeEnd <= rangeStart) {
+    rangeEnd = rangeStart + 3600000
+  }
+
+  const globalStart = rangeStart
+  const globalEnd = rangeEnd
+
+  const maxSegments = params.maxSegments != null ? params.maxSegments : 4000
+  const sorted = normalizeSummaries(payload, maxSegments)
+
+  if (typeof dynamicWindowMs === 'number' && dynamicWindowMs > 0) {
+    rangeEnd = globalEnd
+    rangeStart = Math.max(globalStart, globalEnd - dynamicWindowMs)
+  }
+
+  const colorResolver = buildColorResolver(yAxis, colorMap, presetColors)
+
+  /** 与 Y 轴类目轴文字默认一致，图例文字与之共用，避免深浅主题下色差 */
+  const categoryAxisLabelStyle = {
+    color: '#666',
+    fontSize: 12
+  }
+
+  const categories =
+    categoriesOverride ||
+    (showSummary ? [summaryLabel, ...yAxis.map(y => y.statusName || y.statusCode)] : yAxis.map(y => y.statusName || y.statusCode))
+
+  const customData = []
+  let summaryY = -1
+  if (showSummary) {
+    summaryY = 0
+    customData.push(...buildSummaryLaneItems(sorted, rangeStart, rangeEnd, summaryY, colorResolver, gapColor, fillSummaryGaps))
+  }
+
+  yAxis.forEach((row, i) => {
+    const yIndex = showSummary ? i + 1 : i
+    customData.push(...buildStatusLaneItems(sorted, rangeStart, rangeEnd, yIndex, row.statusCode, colorResolver))
+  })
+
+  /**
+   * ECharts 图例项需与某一 series 的 name 对应，否则「仅配置 legend.data」时图例往往不显示。
+   * 使用无数据的占位 line 系列仅用于图例色块与名称；真正绘制由下方 custom 系列完成。
+   */
+  const phantomSeriesForLegend = yAxis.map(y => {
+    const name = y.statusName || String(y.statusCode)
+    const color = colorResolver(y.statusCode)
+    return {
+      name,
+      type: 'line',
+      data: [],
+      silent: true,
+      legendHoverLink: false,
+      symbol: 'none',
+      lineStyle: { width: 0, opacity: 0, color },
+      itemStyle: { color },
+      emphasis: { disabled: true },
+      tooltip: { show: false }
+    }
+  })
+
+  const baseGrid = {
+    left: 72,
+    right: 24,
+    // 有图例时多留顶部区域，与 legend.top 配合拉开图例与绘图区的垂直间距
+    top: displayLegend ? 76 : 24,
+    // 底部多留空：避免最末一行状态条与 X 轴刻度/文字重叠（动态无 DataZoom 时尤其需要）
+    bottom: enableDataZoom ? 76 : 56,
+    containLabel: false
+  }
+
+  function renderItem(params, api) {
+    const yIndex = api.value(0)
+    const start = api.coord([api.value(1), yIndex])
+    const end = api.coord([api.value(2), yIndex])
+    if (!start || !end) return null
+    const height = Math.max(6, api.size([0, 1])[1] * 0.4)
+    const xLeft = Math.min(start[0], end[0])
+    const xRight = Math.max(start[0], end[0])
+    const width = xRight - xLeft
+    if (width < 0.5) return null
+    let shape = {
+      x: xLeft,
+      y: start[1] - height / 2,
+      width,
+      height
+    }
+    const cs = params.coordSys
+    if (cs && cs.width != null && cs.height != null) {
+      shape = clipRectToGrid(shape, { x: cs.x, y: cs.y, width: cs.width, height: cs.height })
+      if (!shape) return null
+    }
+    return {
+      type: 'rect',
+      shape,
+      style: api.style()
+    }
+  }
+
+  const legendCount = yAxis.length
+  const legendRowLimit = Math.max(1, Number(legendMaxItemsPerRow) || 6)
+  const approxW = Math.max(40, Number(legendItemApproxWidth) || 88)
+  const useLegendScroll = displayLegend && legendCount > legendRowLimit
+  let resolvedScrollWidth = legendScrollWidth
+  if (useLegendScroll && resolvedScrollWidth == null) {
+    resolvedScrollWidth = Math.round(legendRowLimit * approxW + 72)
+  }
+
+  const defaultTooltipFormatter = p => {
+    const d = p.data
+    if (!d || !d.segmentRaw) {
+      if (d && d.isGap) return '无状态 / 空档'
+      return ''
+    }
+    const seg = d.segmentRaw
+    const color = d.itemStyle && d.itemStyle.color ? d.itemStyle.color : '#999'
+    const name = seg.statusName || seg.statusCode
+    const dur = formatDurationZh(seg.duration)
+    const st = seg.startTime
+    const en = seg.endTime
+    return `
+      <div style="padding:4px 2px;line-height:1.6;">
+        <div><span style="display:inline-block;width:8px;height:8px;border-radius:2px;background:${color};margin-right:6px;vertical-align:middle;"></span>${name}</div>
+        <div>时间段：${st} - ${en}</div>
+        <div>持续时间：${dur}</div>
+      </div>`
+  }
+
+  const option = {
+    animation: true,
+    animationDuration,
+    animationDurationUpdate,
+    animationEasing: 'cubicOut',
+    animationEasingUpdate: 'cubicOut',
+    tooltip: {
+      trigger: 'item',
+      confine: true,
+      backgroundColor: 'rgba(40,40,40,0.92)',
+      borderWidth: 0,
+      textStyle: { color: '#fff', fontSize: 12 },
+      formatter: tooltipFormatter || defaultTooltipFormatter
+    },
+    legend: displayLegend
+      ? merge(
+          {
+            top: 10,
+            orient: 'horizontal',
+            type: useLegendScroll ? 'scroll' : 'plain',
+            icon: 'roundRect',
+            data: yAxis.map(y => y.statusName || String(y.statusCode)),
+            selectedMode: false,
+            padding: [0, 0, 10, 0],
+            textStyle: { ...categoryAxisLabelStyle },
+            ...(useLegendScroll
+              ? {
+                  width: resolvedScrollWidth,
+                  pageButtonItemGap: 6,
+                  pageButtonGap: 10,
+                  pageIconSize: 12,
+                  pageIconColor: categoryAxisLabelStyle.color,
+                  pageIconInactiveColor: '#c0c4cc',
+                  pageTextStyle: { color: categoryAxisLabelStyle.color, fontSize: 12 },
+                  animation: true,
+                  animationDurationUpdate: 300
+                }
+              : {})
+          },
+          legendOption
+        )
+      : { show: false },
+    grid: merge(baseGrid, gridUser),
+    xAxis: merge(
+      {
+        type: 'time',
+        min: rangeStart,
+        max: rangeEnd,
+        axisLine: { lineStyle: { color: '#ccc' } },
+        axisLabel: {
+          color: '#666',
+          hideOverlap: true,
+          margin: 14
+        },
+        splitLine: { show: true, lineStyle: { type: 'dashed', color: '#eee' } }
+      },
+      xAxisOption
+    ),
+    yAxis: merge(
+      {
+        type: 'category',
+        data: categories,
+        inverse: false,
+        boundaryGap: ['10%', '16%'],
+        axisLine: { lineStyle: { color: '#ccc' } },
+        axisLabel: { ...categoryAxisLabelStyle },
+        splitLine: { show: false }
+      },
+      yAxisOption
+    ),
+    series: [
+      ...phantomSeriesForLegend,
+      {
+        type: 'custom',
+        name: '__statusTimeline',
+        legendHoverLink: false,
+        coordinateSystem: 'cartesian2d',
+        clip: true,
+        renderItem,
+        encode: { x: [1, 2], y: 0 },
+        data: customData,
+        z: 2
+      }
+    ]
+  }
+
+  if (enableDataZoom) {
+    let dz = dataZoomUser
+    if (dz === true || dz == null) dz = defaultDataZoom()
+    if (Array.isArray(dz)) option.dataZoom = dz
+    else if (typeof dz === 'object') option.dataZoom = [dz]
+  }
+
+  return merge(option, echartsOption)
+}

package/src/packages/step/index.js

@@ -0,0 +1,12 @@
+/**
+ * Step 步骤组件
+ */
+
+import UiStep from './src/main.vue'
+
+// 自动安装
+UiStep.install = function(Vue) {
+  Vue.component(UiStep.name, UiStep)
+}
+
+export default UiStep

package/src/packages/step/src/main.vue

@@ -0,0 +1,183 @@
+<template>
+  <div
+    class="ui-step"
+    :style="style"
+    :class="[
+      !isSimple && `is-${$parent.direction}`,
+      isSimple && 'is-simple',
+      isLast && !space && !isCenter && 'is-flex',
+      isCenter && !isVertical && !isSimple && 'is-center'
+     ]">
+    <!-- icon & line -->
+    <div
+      class="ui-step__head"
+      :class="`is-${currentStatus}`">
+      <div
+        class="ui-step__line"
+        :style="isLast ? '' : { marginRight: $parent.stepOffset + 'px' }"
+      >
+        <i class="ui-step__line-inner" :style="lineStyle"></i>
+      </div>
+
+      <div class="ui-step__icon" :class="`is-${icon ? 'icon' : 'text'}`">
+        <slot
+          v-if="currentStatus !== 'success' && currentStatus !== 'error'"
+          name="icon">
+          <i v-if="icon" class="ui-step__icon-inner" :class="[icon]"></i>
+          <div class="ui-step__icon-inner" v-if="!icon && !isSimple">{{ index + 1 }}</div>
+        </slot>
+        <i
+          v-else
+          :class="['icon-' + (currentStatus === 'success' ? 'check' : 'close')]"
+          class="ui-step__icon-inner is-status"
+        >
+        </i>
+      </div>
+    </div>
+    <!-- title & description -->
+    <div class="ui-step__main">
+      <div
+        class="ui-step__title"
+        ref="title"
+        :class="['is-' + currentStatus]">
+        <slot name="title">{{ title }}</slot>
+      </div>
+      <div v-if="isSimple" class="ui-step__arrow"></div>
+      <div
+        v-else
+        class="ui-step__description"
+        :class="['is-' + currentStatus]">
+        <slot name="description">{{ description }}</slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiStep',
+
+  props: {
+    title: String,
+    icon: String,
+    description: String,
+    status: {
+      type: String,
+      validator: value => ['finish', 'success', 'error', 'process', 'wait'].includes(value)
+    }
+  },
+
+  data() {
+    return {
+      index: -1,
+      lineStyle: {},
+      internalStatus: ''
+    };
+  },
+
+  beforeCreate() {
+    this.$parent.steps.push(this);
+  },
+
+  beforeDestroy() {
+    const steps = this.$parent.steps;
+    const index = steps.indexOf(this);
+    if (index >= 0) {
+      steps.splice(index, 1);
+    }
+  },
+
+  computed: {
+    currentStatus() {
+      return this.status || this.internalStatus;
+    },
+    prevStatus() {
+      const prevStep = this.$parent.steps[this.index - 1];
+      return prevStep ? prevStep.currentStatus : 'wait';
+    },
+    isCenter() {
+      return this.$parent.alignCenter;
+    },
+    isVertical() {
+      return this.$parent.direction === 'vertical';
+    },
+    isSimple() {
+      return this.$parent.simple;
+    },
+    isLast() {
+      const parent = this.$parent;
+      return parent.steps[parent.steps.length - 1] === this;
+    },
+    stepsCount() {
+      return this.$parent.steps.length;
+    },
+    space() {
+      const { isSimple, $parent: { space } } = this;
+      return isSimple ? '' : space ;
+    },
+    style() {
+      const style = {};
+      const parent = this.$parent;
+      const len = parent.steps.length;
+
+      const space = (typeof this.space === 'number'
+        ? this.space + 'px'
+        : this.space
+          ? this.space
+          : 100 / (len - (this.isCenter ? 0 : 1)) + '%');
+      style.flexBasis = space;
+      if (this.isVertical) return style;
+      if (this.isLast) {
+        style.maxWidth = 100 / this.stepsCount + '%';
+      } else {
+        style.marginRight = -this.$parent.stepOffset + 'px';
+      }
+
+      return style;
+    }
+  },
+
+  methods: {
+    updateStatus(val) {
+      if (val > this.index) {
+        this.internalStatus = this.$parent.finishStatus;
+      } else if (val === this.index && this.prevStatus !== 'error') {
+        this.internalStatus = this.$parent.processStatus;
+      } else {
+        this.internalStatus = 'wait';
+      }
+    },
+
+    calcProgress(status) {
+      let step = 100;
+      const style = {};
+
+      style.transitionDelay = 150 * this.index + 'ms';
+      if (status === this.$parent.processStatus) {
+        step = this.currentStatus !== 'error' ? 0 : 0;
+      } else if (status === 'wait') {
+        step = 0;
+        style.transitionDelay = (-150 * this.index) + 'ms';
+      }
+
+      style.borderWidth = step && !this.isSimple ? '1px' : 0;
+      this.$parent.direction === 'vertical'
+        ? style.height = step + '%'
+        : style.width = step + '%';
+
+      this.lineStyle = style;
+    }
+  },
+
+  mounted() {
+    const unwatch = this.$watch('index', val => {
+      this.$watch('$parent.active', this.updateStatus, { immediate: true });
+      this.$watch('$parent.processStatus', () => {
+        const activeIndex = this.$parent.active;
+        this.updateStatus(activeIndex);
+      }, { immediate: true });
+      unwatch();
+    });
+  }
+};
+</script>

package/src/packages/steps/index.js

@@ -0,0 +1,12 @@
+/**
+ * Steps 步骤条组件
+ */
+
+import UiSteps from './src/main.vue'
+
+// 自动安装
+UiSteps.install = function(Vue) {
+  Vue.component(UiSteps.name, UiSteps)
+}
+
+export default UiSteps