@vela-studio/ui 1.0.1

package/src/components/advanced/trigger/Trigger.vue

@@ -0,0 +1,256 @@
+<template>
+  <div :style="containerStyle">
+    <div class="trigger-container">
+      <div class="header">
+        <span class="title">
+          <el-icon><Timer /></el-icon>
+          {{ title }}
+        </span>
+        <div class="controls">
+          <el-tag :type="enabled ? 'success' : 'info'" size="small">
+            {{ enabled ? '已启用' : '已禁用' }}
+          </el-tag>
+          <el-button
+            v-if="triggerType === 'manual'"
+            type="primary"
+            size="small"
+            @click="$emit('trigger')"
+            :disabled="!enabled"
+          >
+            触发
+          </el-button>
+          <el-button v-if="showClearButton" size="small" @click="$emit('clear')"> 清除 </el-button>
+        </div>
+      </div>
+
+      <div class="info-section">
+        <div class="info-item">
+          <span class="label">类型:</span>
+          <el-tag size="small">{{ triggerType === 'manual' ? '手动' : '定时' }}</el-tag>
+        </div>
+        <div v-if="triggerType === 'interval'" class="info-item">
+          <span class="label">间隔:</span>
+          <span>{{ interval }}ms</span>
+        </div>
+        <div class="info-item">
+          <span class="label">动作:</span>
+          <span>{{ action }}</span>
+        </div>
+      </div>
+
+      <div class="logs-section">
+        <div class="section-title">执行日志 ({{ logs.length }})</div>
+        <div class="logs-container">
+          <div
+            v-for="(log, index) in logs"
+            :key="index"
+            class="log-item"
+            :class="`log-${log.type}`"
+          >
+            <span class="log-time">{{ log.time }}</span>
+            <span class="log-message">{{ log.message }}</span>
+          </div>
+          <div v-if="logs.length === 0" class="placeholder">
+            <el-icon><DocumentCopy /></el-icon>
+            <span>{{ placeholder }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+import { Timer, DocumentCopy } from '@element-plus/icons-vue'
+
+export interface TriggerLog {
+  time: string
+  message: string
+  type: 'info' | 'success' | 'warning' | 'error'
+}
+
+export interface TriggerProps {
+  title?: string
+  enabled?: boolean
+  triggerType?: 'manual' | 'interval'
+  interval?: number
+  action?: string
+  logs?: TriggerLog[]
+  showClearButton?: boolean
+  placeholder?: string
+  // 样式
+  padding?: number
+  backgroundColor?: string
+  textColor?: string
+  fontSize?: number
+  lineHeight?: number
+  borderRadius?: number
+  border?: string
+  fontFamily?: string
+}
+
+const props = withDefaults(defineProps<TriggerProps>(), {
+  title: '触发器',
+  enabled: true,
+  triggerType: 'manual',
+  interval: 5000,
+  action: 'log',
+  logs: () => [],
+  showClearButton: true,
+  placeholder: '暂无执行记录',
+  padding: 16,
+  backgroundColor: '#1a1a1a',
+  textColor: '#e0e0e0',
+  fontSize: 13,
+  lineHeight: 1.5,
+  borderRadius: 4,
+  border: '1px solid #3c3c3c',
+  fontFamily: 'Consolas, Monaco, "Courier New", monospace',
+})
+
+defineEmits<{
+  trigger: []
+  clear: []
+}>()
+
+const containerStyle = computed<CSSProperties>(() => ({
+  width: '100%',
+  height: '100%',
+  padding: `${props.padding}px`,
+  backgroundColor: props.backgroundColor,
+  color: props.textColor,
+  fontSize: `${props.fontSize}px`,
+  lineHeight: props.lineHeight,
+  borderRadius: `${props.borderRadius}px`,
+  border: props.border,
+  overflow: 'hidden',
+  fontFamily: props.fontFamily,
+}))
+</script>
+
+<style scoped>
+.trigger-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #3c3c3c;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.controls {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.info-section {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  padding: 8px 0;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.label {
+  opacity: 0.7;
+  font-size: 12px;
+}
+
+.section-title {
+  font-size: 12px;
+  opacity: 0.7;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+}
+
+.logs-section {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.logs-container {
+  flex: 1;
+  overflow-y: auto;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.log-item {
+  display: flex;
+  gap: 12px;
+  padding: 6px 8px;
+  margin-bottom: 4px;
+  border-radius: 3px;
+  font-size: 12px;
+  border-left: 3px solid transparent;
+}
+
+.log-info {
+  background: rgba(59, 130, 246, 0.1);
+  border-left-color: #3b82f6;
+}
+
+.log-success {
+  background: rgba(34, 197, 94, 0.1);
+  border-left-color: #22c55e;
+}
+
+.log-warning {
+  background: rgba(251, 191, 36, 0.1);
+  border-left-color: #fbbf24;
+}
+
+.log-error {
+  background: rgba(239, 68, 68, 0.1);
+  border-left-color: #ef4444;
+}
+
+.log-time {
+  opacity: 0.6;
+  flex-shrink: 0;
+  width: 80px;
+}
+
+.log-message {
+  flex: 1;
+  word-break: break-all;
+}
+
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  gap: 8px;
+  opacity: 0.5;
+}
+
+.placeholder .el-icon {
+  font-size: 32px;
+}
+</style>

package/src/components/basic/button/Button.vue

@@ -0,0 +1,120 @@
+<template>
+  <el-button
+    :type="type"
+    :size="size"
+    :plain="plain"
+    :round="round"
+    :circle="circle"
+    :disabled="disabled"
+    :icon="icon"
+    :loading="loading"
+    :style="buttonStyle"
+    @click="handleClick"
+  >
+    {{ text }}
+  </el-button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ElButton } from 'element-plus'
+
+// 定义纯 UI Props
+const props = withDefaults(
+  defineProps<{
+    // 内容
+    text?: string
+
+    // 类型
+    type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text' | 'default'
+    size?: 'large' | 'default' | 'small'
+
+    // 状态
+    plain?: boolean
+    round?: boolean
+    circle?: boolean
+    disabled?: boolean
+    loading?: boolean
+
+    // 图标
+    icon?: string
+
+    // 样式
+    width?: string | number
+    height?: string | number
+    backgroundColor?: string
+    color?: string // 标准化命名：原 textColor
+    fontSize?: number | string // 标准化类型：支持 string | number
+    fontWeight?: number | string
+    borderRadius?: number | string // 标准化类型
+    padding?: string
+  }>(),
+  {
+    text: '按钮',
+    type: 'primary',
+    size: 'default',
+    plain: false,
+    round: false,
+    circle: false,
+    disabled: false,
+    loading: false,
+    // 样式默认值保持 undefined 由 CSS 控制，或显式指定
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void
+}>()
+
+// 按钮样式
+const buttonStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {}
+
+  if (props.width !== undefined) {
+    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width
+  }
+
+  if (props.height !== undefined) {
+    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height
+  }
+
+  if (props.backgroundColor) {
+    style.backgroundColor = props.backgroundColor
+    style.borderColor = props.backgroundColor
+  }
+
+  if (props.color) {
+    style.color = props.color
+  }
+
+  if (props.fontSize !== undefined) {
+    style.fontSize = typeof props.fontSize === 'number' ? `${props.fontSize}px` : props.fontSize
+  }
+
+  if (props.fontWeight !== undefined) {
+    style.fontWeight = props.fontWeight
+  }
+
+  if (props.borderRadius !== undefined) {
+    style.borderRadius =
+      typeof props.borderRadius === 'number' ? `${props.borderRadius}px` : props.borderRadius
+  }
+
+  if (props.padding) {
+    style.padding = props.padding
+  }
+
+  return style
+})
+
+const handleClick = (event: MouseEvent) => {
+  if (!props.disabled && !props.loading) {
+    emit('click', event)
+  }
+}
+</script>
+
+<style scoped>
+/* 样式由 Element Plus 和 props 控制 */
+</style>

package/src/components/basic/container/Container.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="v-container">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+// Container 组件是一个纯粹的容器，样式通过 style 透传 (继承自 $attrs)
+// 不需要定义任何 CSS 相关的 Props
+defineOptions({
+  inheritAttrs: true, // 允许 attrs (style, class, id) 自动绑定到根元素
+})
+</script>
+
+<style scoped>
+.v-container {
+  box-sizing: border-box;
+  /* 默认样式 */
+  position: relative;
+  min-height: 50px; /* 给一个最小高度方便拖拽 */
+}
+</style>

package/src/components/chart/barChart/barChart.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="v-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
+  data?: number[]
+  xAxisData?: string[]
+  seriesName?: string
+
+  // 样式配置 Props
+  title?: string
+  barColor?: string
+  barWidth?: string
+  borderRadius?: number | 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 defaultData = [120, 200, 150, 180, 270, 210, 220]
+const defaultXAxis = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+
+// 计算最终 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 xAxisData = props.xAxisData && props.xAxisData.length ? props.xAxisData : defaultXAxis
+  const seriesName = props.seriesName || 'Series'
+
+  return {
+    // 标题
+    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: [seriesName],
+          }
+        : 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: [
+      {
+        name: seriesName,
+        type: 'bar',
+        data: data,
+        barWidth: props.barWidth || '60%',
+        itemStyle: {
+          color: props.barColor || '#5470c6',
+          borderRadius: props.borderRadius || 0,
+        },
+        label: props.showLabel
+          ? {
+              show: true,
+              position: 'top',
+              fontSize: 12,
+            }
+          : undefined,
+      },
+    ],
+  }
+})
+</script>
+
+<style scoped>
+.v-bar-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.echart {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/chart/doughnutChart/doughnutChart.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="v-doughnut-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 { PieChart } from 'echarts/charts'
+import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import VChart from 'vue-echarts'
+import type { EChartsOption } from 'echarts'
+
+// 注册 ECharts 组件
+use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer])
+
+// 定义标准的 Props，不含任何业务逻辑 ID
+const props = defineProps<{
+  // 基础数据 Props
+  data?: Array<{ name: string; value: number }>
+
+  // 样式配置 Props
+  title?: string
+  titleAlign?: 'left' | 'center' | 'right'
+  titleSize?: number
+  titleColor?: string
+  seriesName?: string
+  innerRadius?: string
+  outerRadius?: string
+  centerX?: string
+  centerY?: string
+  borderRadius?: number
+  borderColor?: string
+  borderWidth?: number
+  showLegend?: boolean
+  legendOrient?: 'horizontal' | 'vertical'
+  legendLeft?: string
+  legendTop?: string
+  showLabel?: boolean
+  labelFormatter?: string
+  showLabelLine?: boolean
+
+  // 高级覆盖
+  option?: EChartsOption
+}>()
+
+// 默认值配置
+const defaultData = [
+  { name: 'Direct', value: 335 },
+  { name: 'Email', value: 310 },
+  { name: 'Union Ads', value: 234 },
+  { name: 'Video Ads', value: 135 },
+  { name: 'Search Engine', value: 1548 },
+]
+
+// 计算最终 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 || 'Access From'
+
+  return {
+    title: {
+      text: props.title || '',
+      left: props.titleAlign || 'center',
+      textStyle: {
+        fontSize: props.titleSize || 16,
+        color: props.titleColor || '#333',
+      },
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)',
+    },
+    legend: {
+      show: props.showLegend !== false,
+      orient: props.legendOrient || 'horizontal',
+      left: props.legendLeft || 'center',
+      top: props.legendTop || 'bottom',
+    },
+    series: [
+      {
+        name: seriesName,
+        type: 'pie',
+        radius: [props.innerRadius || '40%', props.outerRadius || '70%'],
+        center: [props.centerX || '50%', props.centerY || '50%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: props.borderRadius || 10,
+          borderColor: props.borderColor || '#fff',
+          borderWidth: props.borderWidth || 2,
+        },
+        label: {
+          show: props.showLabel !== false,
+          formatter: props.labelFormatter || '{b}: {c}',
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 20,
+            fontWeight: 'bold',
+          },
+        },
+        labelLine: {
+          show: props.showLabelLine !== false,
+        },
+        data: data,
+      },
+    ],
+  }
+})
+</script>
+
+<style scoped>
+.v-doughnut-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.echart {
+  width: 100%;
+  height: 100%;
+}
+</style>