@vela-studio/ui 1.0.1

package/src/components/chart/sankeyChart/sankeyChart.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="v-sankey-chart" :style="{ width: '100%', height: '100%' }">
+    <v-chart :option="finalOption" autoresize class="echart" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { SankeyChart } from 'echarts/charts'
+import { TitleComponent, TooltipComponent } from 'echarts/components'
+import VChart from 'vue-echarts'
+import type { EChartsOption } from 'echarts'
+
+// 注册 ECharts 组件
+use([TitleComponent, TooltipComponent, SankeyChart, CanvasRenderer])
+
+// Sankey 节点类型
+interface SankeyNode {
+  name: string
+  value?: number
+  depth?: number
+  itemStyle?: Record<string, unknown>
+}
+
+// Sankey 连接类型
+interface SankeyLink {
+  source: string
+  target: string
+  value: number
+}
+
+// 定义标准的 Props，不含任何业务逻辑 ID
+const props = defineProps<{
+  // 基础数据 Props
+  data?: SankeyNode[]
+  links?: SankeyLink[]
+
+  // 样式配置 Props
+  title?: string
+  orient?: 'horizontal' | 'vertical'
+  left?: string
+  top?: string
+  right?: string
+  bottom?: string
+  nodeWidth?: number
+  nodeGap?: number
+  layoutIterations?: number
+  nodeAlign?: 'left' | 'right' | 'justify'
+  showLabel?: boolean
+  labelPosition?: 'left' | 'right' | 'top' | 'bottom'
+  labelFontSize?: number
+  labelColor?: string
+  lineColor?: string
+  lineOpacity?: number
+  lineCurveness?: number
+
+  // 高级覆盖
+  option?: EChartsOption
+}>()
+
+// 默认值配置
+const defaultNodes: SankeyNode[] = [
+  { name: 'a' },
+  { name: 'b' },
+  { name: 'c' },
+  { name: 'd' },
+  { name: 'e' },
+  { name: 'f' },
+]
+
+const defaultLinks: SankeyLink[] = [
+  { source: 'a', target: 'b', value: 5 },
+  { source: 'a', target: 'c', value: 3 },
+  { source: 'b', target: 'd', value: 8 },
+  { source: 'b', target: 'e', value: 3 },
+  { source: 'c', target: 'e', value: 4 },
+  { source: 'd', target: 'f', value: 6 },
+  { source: 'e', target: 'f', value: 5 },
+]
+
+// 计算最终 Option
+const finalOption = computed<EChartsOption>(() => {
+  // 如果有高级配置 option，优先使用
+  if (props.option && Object.keys(props.option).length > 0) return props.option
+
+  const data = props.data && props.data.length ? props.data : defaultNodes
+  const links = props.links && props.links.length ? props.links : defaultLinks
+
+  return {
+    title: {
+      text: props.title || '',
+      left: 'center',
+    },
+    tooltip: {
+      trigger: 'item',
+      triggerOn: 'mousemove',
+    },
+    series: [
+      {
+        type: 'sankey',
+        data: data,
+        links: links,
+        emphasis: {
+          focus: 'adjacency',
+        },
+        orient: props.orient || 'horizontal',
+        left: props.left || '5%',
+        top: props.top || '10%',
+        right: props.right || '20%',
+        bottom: props.bottom || '10%',
+        nodeWidth: props.nodeWidth || 20,
+        nodeGap: props.nodeGap || 8,
+        layoutIterations: props.layoutIterations || 32,
+        nodeAlign: props.nodeAlign || 'justify',
+        label: {
+          show: props.showLabel !== false,
+          position: props.labelPosition || 'right',
+          fontSize: props.labelFontSize || 12,
+          color: props.labelColor || '#000',
+        },
+        lineStyle: {
+          color: props.lineColor || 'source',
+          opacity: props.lineOpacity || 0.2,
+          curveness: props.lineCurveness || 0.5,
+        },
+      },
+    ],
+  }
+})
+</script>
+
+<style scoped>
+.v-sankey-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.echart {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/chart/scatterChart/scatterChart.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="v-scatter-chart" :style="{ width: '100%', height: '100%' }">
+    <v-chart :option="finalOption" autoresize class="echart" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { ScatterChart } from 'echarts/charts'
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+} from 'echarts/components'
+import VChart from 'vue-echarts'
+import type { EChartsOption } from 'echarts'
+
+// 注册 ECharts 组件
+use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  ScatterChart,
+  CanvasRenderer,
+])
+
+// 定义标准的 Props，不含任何业务逻辑 ID
+const props = defineProps<{
+  // 基础数据 Props
+  data?: Array<[number, number]>
+
+  // 样式配置 Props
+  title?: string
+  titleAlign?: 'left' | 'center' | 'right'
+  titleSize?: number
+  titleColor?: string
+  seriesName?: string
+  symbolSize?: number
+  color?: string
+  opacity?: number
+  showLegend?: boolean
+  legendLeft?: string
+  legendTop?: string
+  gridLeft?: string
+  gridRight?: string
+  gridBottom?: string
+  gridTop?: string
+  xAxisName?: string
+  yAxisName?: string
+  showXAxisSplitLine?: boolean
+  showYAxisSplitLine?: boolean
+
+  // 高级覆盖
+  option?: EChartsOption
+}>()
+
+// 默认值配置
+const defaultData: Array<[number, number]> = [
+  [10.0, 8.04],
+  [8.07, 6.95],
+  [13.0, 7.58],
+  [9.05, 8.81],
+  [11.0, 8.33],
+  [14.0, 7.66],
+  [13.4, 6.81],
+  [10.0, 6.33],
+  [14.0, 8.96],
+  [12.5, 6.82],
+]
+
+// 计算最终 Option
+const finalOption = computed<EChartsOption>(() => {
+  // 如果有高级配置 option，优先使用
+  if (props.option && Object.keys(props.option).length > 0) return props.option
+
+  const data = props.data && props.data.length ? props.data : defaultData
+  const seriesName = props.seriesName || 'Data'
+
+  return {
+    title: {
+      text: props.title || '',
+      left: props.titleAlign || 'center',
+      textStyle: {
+        fontSize: props.titleSize || 16,
+        color: props.titleColor || '#333',
+      },
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: (params: unknown) => {
+        const p = params as { seriesName: string; value: [number, number] }
+        return `${p.seriesName}<br/>${p.value[0]}, ${p.value[1]}`
+      },
+    },
+    legend: {
+      show: props.showLegend !== false,
+      left: props.legendLeft || 'center',
+      top: props.legendTop || 'bottom',
+    },
+    grid: {
+      left: props.gridLeft || '10%',
+      right: props.gridRight || '10%',
+      bottom: props.gridBottom || '15%',
+      top: props.gridTop || '15%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'value',
+      name: props.xAxisName || '',
+      nameLocation: 'middle',
+      nameGap: 30,
+      splitLine: {
+        show: props.showXAxisSplitLine !== false,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      name: props.yAxisName || '',
+      nameLocation: 'middle',
+      nameGap: 40,
+      splitLine: {
+        show: props.showYAxisSplitLine !== false,
+      },
+    },
+    series: [
+      {
+        name: seriesName,
+        type: 'scatter',
+        symbolSize: props.symbolSize || 10,
+        data: data,
+        itemStyle: {
+          color: props.color || '#5470c6',
+          opacity: props.opacity || 0.8,
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+      },
+    ],
+  }
+})
+</script>
+
+<style scoped>
+.v-scatter-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.echart {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/chart/stackedBarChart/stackedBarChart.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="v-stacked-bar-chart" :style="{ width: '100%', height: '100%' }">
+    <v-chart :option="finalOption" autoresize class="echart" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart } from 'echarts/charts'
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+} from 'echarts/components'
+import VChart from 'vue-echarts'
+import type { EChartsOption } from 'echarts'
+
+// 注册 ECharts 组件
+use([TitleComponent, TooltipComponent, GridComponent, LegendComponent, BarChart, CanvasRenderer])
+
+// 定义标准的 Props，不含任何业务逻辑 ID
+const props = defineProps<{
+  // 基础数据 Props
+  xAxisData?: string[]
+  seriesNames?: string[]
+  seriesData?: number[][]
+
+  // 样式配置 Props
+  title?: string
+  colors?: string[]
+  barWidth?: string
+  borderRadius?: number
+  showTooltip?: boolean
+  showLegend?: boolean
+  legendPosition?: 'top' | 'bottom' | 'left' | 'right'
+  showGrid?: boolean
+  xAxisName?: string
+  yAxisName?: string
+  showXAxisLine?: boolean
+  showXAxisLabel?: boolean
+  showYAxisLine?: boolean
+  showYAxisLabel?: boolean
+  showLabel?: boolean
+
+  // 高级覆盖
+  option?: EChartsOption
+}>()
+
+// 默认值配置
+const defaultXAxis = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+const defaultSeriesNames = ['Series 1', 'Series 2', 'Series 3']
+const defaultSeriesData = [
+  [120, 132, 101, 134, 90, 230, 210],
+  [220, 182, 191, 234, 290, 330, 310],
+  [150, 232, 201, 154, 190, 330, 410],
+]
+const defaultColors = ['#5470c6', '#91cc75', '#fac858']
+
+// 计算最终 Option
+const finalOption = computed<EChartsOption>(() => {
+  // 如果有高级配置 option，优先使用
+  if (props.option && Object.keys(props.option).length > 0) return props.option
+
+  const xAxisData = props.xAxisData && props.xAxisData.length ? props.xAxisData : defaultXAxis
+  const seriesNames =
+    props.seriesNames && props.seriesNames.length ? props.seriesNames : defaultSeriesNames
+  const seriesData =
+    props.seriesData && props.seriesData.length ? props.seriesData : defaultSeriesData
+  const colors = props.colors && props.colors.length ? props.colors : defaultColors
+
+  return {
+    color: colors,
+    // 标题
+    title: props.title
+      ? {
+          text: props.title,
+          left: 'center',
+          textStyle: {
+            fontSize: 16,
+          },
+        }
+      : undefined,
+
+    // 提示框
+    tooltip:
+      props.showTooltip !== false
+        ? {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow',
+            },
+          }
+        : undefined,
+
+    // 图例
+    legend:
+      props.showLegend !== false
+        ? {
+            [(props.legendPosition as string) || 'top']: 10,
+            data: seriesNames,
+          }
+        : undefined,
+
+    // 网格
+    grid: {
+      left: '6%',
+      right: '6%',
+      bottom: '8%',
+      top: props.title ? '15%' : '10%',
+      containLabel: true,
+      show: props.showGrid !== false,
+    },
+
+    // X 轴
+    xAxis: {
+      type: 'category',
+      data: xAxisData,
+      name: props.xAxisName || '',
+      nameLocation: 'middle',
+      nameGap: 30,
+      axisLine: {
+        show: props.showXAxisLine !== false,
+      },
+      axisLabel: {
+        show: props.showXAxisLabel !== false,
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+
+    // Y 轴
+    yAxis: {
+      type: 'value',
+      name: props.yAxisName || '',
+      nameLocation: 'middle',
+      nameGap: 50,
+      axisLine: {
+        show: props.showYAxisLine !== false,
+      },
+      axisLabel: {
+        show: props.showYAxisLabel !== false,
+      },
+      splitLine: {
+        show: props.showGrid !== false,
+      },
+    },
+
+    // 系列
+    series: seriesData.map((data, index) => ({
+      name: seriesNames[index] || `Series ${index + 1}`,
+      type: 'bar',
+      stack: 'total',
+      data: data,
+      barWidth: props.barWidth || '60%',
+      itemStyle: {
+        borderRadius: index === seriesData.length - 1 ? props.borderRadius || 0 : 0,
+      },
+      label: props.showLabel
+        ? {
+            show: true,
+            position: 'inside',
+            fontSize: 12,
+          }
+        : undefined,
+    })),
+  }
+})
+</script>
+
+<style scoped>
+.v-stacked-bar-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.echart {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/content/html/Html.vue

@@ -0,0 +1,104 @@
+<template>
+  <div :style="containerStyle" class="html-container" v-html="sanitizedHtml"></div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import DOMPurify from 'dompurify'
+
+const props = withDefaults(
+  defineProps<{
+    content?: string
+    sanitize?: boolean
+    allowedTags?: string
+    allowedAttributes?: string
+    padding?: number
+    backgroundColor?: string
+    textColor?: string
+    fontSize?: number
+    lineHeight?: number | string
+    borderRadius?: number
+    border?: string
+    overflow?: string
+    fontFamily?: string
+  }>(),
+  {
+    content: '<p>请输入 HTML 内容...</p>',
+    sanitize: true,
+    allowedTags: undefined,
+    allowedAttributes: undefined,
+    padding: 16,
+    backgroundColor: '#ffffff',
+    textColor: '#333333',
+    fontSize: 14,
+    lineHeight: 1.6,
+    borderRadius: 0,
+    border: 'none',
+    overflow: 'auto',
+    fontFamily: 'inherit',
+  },
+)
+
+// 清理后的 HTML
+const sanitizedHtml = computed(() => {
+  if (props.sanitize) {
+    return DOMPurify.sanitize(props.content, {
+      ALLOWED_TAGS: props.allowedTags ? props.allowedTags.split(',') : undefined,
+      ALLOWED_ATTR: props.allowedAttributes ? props.allowedAttributes.split(',') : undefined,
+    })
+  }
+  return props.content
+})
+
+// 样式
+const containerStyle = computed<CSSProperties>(() => ({
+  width: '100%',
+  height: '100%',
+  padding: `${props.padding}px`,
+  backgroundColor: props.backgroundColor,
+  color: props.textColor,
+  fontSize: `${props.fontSize}px`,
+  lineHeight: String(props.lineHeight),
+  borderRadius: `${props.borderRadius}px`,
+  border: props.border,
+  overflow: props.overflow,
+  fontFamily: props.fontFamily,
+}))
+</script>
+
+<style scoped>
+.html-container {
+  box-sizing: border-box;
+}
+
+/* 基础样式重置 */
+.html-container :deep(*) {
+  box-sizing: border-box;
+}
+
+.html-container :deep(img) {
+  max-width: 100%;
+  height: auto;
+}
+
+.html-container :deep(table) {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.html-container :deep(table th),
+.html-container :deep(table td) {
+  padding: 8px;
+  border: 1px solid #ddd;
+}
+
+.html-container :deep(a) {
+  color: #409eff;
+  text-decoration: none;
+}
+
+.html-container :deep(a:hover) {
+  text-decoration: underline;
+}
+</style>

package/src/components/content/iframe/Iframe.vue

@@ -0,0 +1,111 @@
+<template>
+  <div :style="containerStyle" class="iframe-container">
+    <iframe
+      v-if="url"
+      :src="url"
+      :style="iframeStyle"
+      :title="title"
+      :sandbox="sandbox"
+      :allow="allow"
+      loading="lazy"
+      referrerpolicy="no-referrer-when-downgrade"
+    ></iframe>
+    <!-- 遮罩层：防止 iframe 拦截鼠标事件（编辑模式） -->
+    <div v-if="url && showMask" class="iframe-mask"></div>
+    <div v-else-if="!url" class="iframe-placeholder">
+      <el-icon><Link /></el-icon>
+      <span>{{ placeholder }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { Link } from '@element-plus/icons-vue'
+import { ElIcon } from 'element-plus'
+
+const props = withDefaults(
+  defineProps<{
+    url?: string
+    title?: string
+    sandbox?: string
+    allow?: string
+    placeholder?: string
+    showMask?: boolean
+    backgroundColor?: string
+    borderRadius?: number
+    border?: string
+    opacity?: number
+  }>(),
+  {
+    url: '',
+    title: 'iframe',
+    sandbox: undefined,
+    allow: undefined,
+    placeholder: '请设置 iframe 地址',
+    showMask: true,
+    backgroundColor: '#ffffff',
+    borderRadius: 0,
+    border: '1px solid #dcdfe6',
+    opacity: 100,
+  },
+)
+
+// 样式
+const containerStyle = computed<CSSProperties>(() => ({
+  width: '100%',
+  height: '100%',
+  backgroundColor: props.backgroundColor,
+  borderRadius: `${props.borderRadius}px`,
+  overflow: 'hidden',
+  border: props.border,
+}))
+
+const iframeStyle = computed<CSSProperties>(() => ({
+  width: '100%',
+  height: '100%',
+  border: 'none',
+  opacity: props.opacity / 100,
+}))
+</script>
+
+<style scoped>
+.iframe-container {
+  position: relative;
+}
+
+.iframe-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  z-index: 1;
+  pointer-events: auto;
+}
+
+/* 运行时模式下移除遮罩 */
+:global(.runtime-mode) .iframe-mask {
+  display: none;
+}
+
+.iframe-placeholder {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  color: #909399;
+  font-size: 14px;
+  gap: 8px;
+  background-color: #f5f7fa;
+}
+
+.iframe-placeholder .el-icon {
+  font-size: 48px;
+  color: #c0c4cc;
+}
+</style>