@vela-studio/ui 1.0.1

package/src/components/data/timeline/Timeline.vue

@@ -0,0 +1,315 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { Clock } from '@element-plus/icons-vue'
+import { ElScrollbar, ElEmpty, ElTimeline, ElTimelineItem, ElCard } from 'element-plus'
+
+export interface TimelineItem {
+  title?: string
+  content?: string
+  timestamp?: string
+  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+  color?: string
+  extra?: string
+  icon?: unknown
+}
+
+const props = withDefaults(
+  defineProps<{
+    // 数据
+    data?: TimelineItem[]
+    // 配置
+    showCard?: boolean
+    showTitle?: boolean
+    showTimestamp?: boolean
+    showExtra?: boolean
+    timestampPlacement?: 'top' | 'bottom'
+    itemSize?: 'normal' | 'large'
+    hollow?: boolean
+    cardShadow?: 'always' | 'hover' | 'never'
+    emptyText?: string
+    scrollHeight?: string
+    // 样式
+    backgroundColor?: string
+    borderRadius?: number
+    padding?: number
+    opacity?: number
+    visible?: boolean
+    // 时间轴样式
+    timelinePadding?: number
+    // 卡片样式
+    cardMargin?: number
+    cardBorderRadius?: number
+    // 标题样式
+    headerFontSize?: number
+    headerFontWeight?: string
+    headerColor?: string
+    titleFontSize?: number
+    titleFontWeight?: string
+    titleColor?: string
+    // 内容样式
+    contentFontSize?: number
+    contentColor?: string
+    textFontSize?: number
+    textColor?: string
+    // 额外信息样式
+    extraFontSize?: number
+    extraColor?: string
+  }>(),
+  {
+    data: () => [],
+    showCard: true,
+    showTitle: true,
+    showTimestamp: true,
+    showExtra: false,
+    timestampPlacement: 'top',
+    itemSize: 'normal',
+    hollow: false,
+    cardShadow: 'hover',
+    emptyText: '暂无数据',
+    scrollHeight: '100%',
+    backgroundColor: '#ffffff',
+    borderRadius: 4,
+    padding: 16,
+    opacity: 100,
+    visible: true,
+    timelinePadding: 0,
+    cardMargin: 12,
+    cardBorderRadius: 4,
+    headerFontSize: 15,
+    headerFontWeight: '600',
+    headerColor: '#303133',
+    titleFontSize: 15,
+    titleFontWeight: '600',
+    titleColor: '#303133',
+    contentFontSize: 14,
+    contentColor: '#606266',
+    textFontSize: 14,
+    textColor: '#606266',
+    extraFontSize: 12,
+    extraColor: '#909399',
+  },
+)
+
+// 默认示例数据
+const defaultData: TimelineItem[] = [
+  {
+    title: '活动开始',
+    content: '这是活动的开始阶段',
+    timestamp: '2024-01-01 10:00',
+    type: 'primary',
+  },
+  { title: '进行中', content: '活动正在进行中', timestamp: '2024-01-02 14:30', type: 'success' },
+  { title: '活动结束', content: '活动已经顺利结束', timestamp: '2024-01-03 18:00', type: 'info' },
+]
+
+const timelineData = computed(() => (props.data.length > 0 ? props.data : defaultData))
+
+function getTitle(item: TimelineItem): string {
+  return item.title ?? ''
+}
+
+function getContent(item: TimelineItem): string {
+  return item.content ?? ''
+}
+
+function getTimestamp(item: TimelineItem): string {
+  return item.timestamp ?? ''
+}
+
+function getExtra(item: TimelineItem): string {
+  return item.extra ?? ''
+}
+
+function getItemType(
+  item: TimelineItem,
+  index: number,
+): 'primary' | 'success' | 'warning' | 'danger' | 'info' {
+  if (item.type && ['primary', 'success', 'warning', 'danger', 'info'].includes(item.type)) {
+    return item.type
+  }
+  const types: ('primary' | 'success' | 'warning' | 'danger' | 'info')[] = [
+    'primary',
+    'success',
+    'info',
+    'warning',
+    'danger',
+  ]
+  return types[index % types.length]
+}
+
+function getItemColor(item: TimelineItem): string | undefined {
+  return item.color
+}
+
+function getItemIcon(item: TimelineItem) {
+  return item.icon || Clock
+}
+
+// 样式
+const containerStyle = computed<CSSProperties>(() => ({
+  opacity: props.opacity / 100,
+  display: props.visible === false ? 'none' : 'block',
+  width: '100%',
+  height: '100%',
+  backgroundColor: props.backgroundColor,
+  borderRadius: `${props.borderRadius}px`,
+  padding: `${props.padding}px`,
+  overflow: 'hidden',
+  boxSizing: 'border-box',
+}))
+
+const timelineStyle = computed<CSSProperties>(() => ({
+  paddingLeft: `${props.timelinePadding}px`,
+}))
+
+const cardStyle = computed<CSSProperties>(() => ({
+  marginBottom: `${props.cardMargin}px`,
+  borderRadius: `${props.cardBorderRadius}px`,
+}))
+
+const headerStyle = computed<CSSProperties>(() => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  fontSize: `${props.headerFontSize}px`,
+  fontWeight: props.headerFontWeight,
+  color: props.headerColor,
+}))
+
+const contentStyle = computed<CSSProperties>(() => ({
+  fontSize: `${props.contentFontSize}px`,
+  color: props.contentColor,
+  lineHeight: 1.6,
+}))
+
+const extraStyle = computed<CSSProperties>(() => ({
+  marginTop: '8px',
+  fontSize: `${props.extraFontSize}px`,
+  color: props.extraColor,
+}))
+
+const titleStyle = computed<CSSProperties>(() => ({
+  fontSize: `${props.titleFontSize}px`,
+  fontWeight: props.titleFontWeight,
+  color: props.titleColor,
+  marginBottom: '4px',
+}))
+
+const textStyle = computed<CSSProperties>(() => ({
+  fontSize: `${props.textFontSize}px`,
+  color: props.textColor,
+  lineHeight: 1.6,
+}))
+
+const extraTextStyle = computed<CSSProperties>(() => ({
+  marginTop: '6px',
+  fontSize: `${props.extraFontSize}px`,
+  color: props.extraColor,
+}))
+</script>
+
+<template>
+  <div class="timeline-container" :style="containerStyle">
+    <el-scrollbar :height="scrollHeight">
+      <div v-if="timelineData.length === 0" class="empty-state">
+        <el-empty :description="emptyText" :image-size="80" />
+      </div>
+      <el-timeline v-else :style="timelineStyle">
+        <el-timeline-item
+          v-for="(item, index) in timelineData"
+          :key="index"
+          :timestamp="getTimestamp(item)"
+          :placement="timestampPlacement"
+          :type="getItemType(item, index)"
+          :color="getItemColor(item)"
+          :size="itemSize"
+          :hollow="hollow"
+          :icon="getItemIcon(item)"
+        >
+          <el-card v-if="showCard" :shadow="cardShadow" :style="cardStyle">
+            <template #header>
+              <div class="card-header" :style="headerStyle">
+                <span class="card-title">{{ getTitle(item) }}</span>
+                <span v-if="showTimestamp" class="card-time">{{ getTimestamp(item) }}</span>
+              </div>
+            </template>
+            <div class="card-content" :style="contentStyle">
+              {{ getContent(item) }}
+            </div>
+            <div v-if="showExtra && getExtra(item)" class="card-extra" :style="extraStyle">
+              {{ getExtra(item) }}
+            </div>
+          </el-card>
+
+          <div v-else class="timeline-content">
+            <div v-if="showTitle" class="content-title" :style="titleStyle">
+              {{ getTitle(item) }}
+            </div>
+            <div class="content-text" :style="textStyle">
+              {{ getContent(item) }}
+            </div>
+            <div v-if="showExtra && getExtra(item)" class="content-extra" :style="extraTextStyle">
+              {{ getExtra(item) }}
+            </div>
+          </div>
+        </el-timeline-item>
+      </el-timeline>
+    </el-scrollbar>
+  </div>
+</template>
+
+<style scoped>
+.timeline-container {
+  box-sizing: border-box;
+}
+
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-title {
+  flex: 1;
+}
+
+.card-time {
+  font-size: 13px;
+  color: #909399;
+  font-weight: normal;
+  margin-left: 12px;
+}
+
+.card-content {
+  margin: 0;
+}
+
+.card-extra {
+  padding-top: 8px;
+  border-top: 1px solid #ebeef5;
+}
+
+.timeline-content {
+  padding: 8px 0;
+}
+
+.content-title {
+  margin-bottom: 4px;
+}
+
+.content-text {
+  margin: 0;
+}
+
+.content-extra {
+  padding-top: 6px;
+}
+</style>

package/src/components/group/Group.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="group-container" :style="containerStyle">
+    <slot>
+      <div v-if="showPlaceholder" class="group-placeholder">
+        {{ placeholder }}
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+
+export interface GroupProps {
+  /** 容器透明度 0-1 */
+  opacity?: number
+  /** 是否可见 */
+  visible?: boolean
+  /** 旋转角度 */
+  rotation?: number
+  /** 边框圆角 */
+  borderRadius?: number
+  /** 背景色 */
+  backgroundColor?: string
+  /** 边框样式 */
+  border?: string
+  /** 是否显示占位符 */
+  showPlaceholder?: boolean
+  /** 占位符文本 */
+  placeholder?: string
+}
+
+const props = withDefaults(defineProps<GroupProps>(), {
+  opacity: 1,
+  visible: true,
+  rotation: 0,
+  borderRadius: 0,
+  backgroundColor: 'transparent',
+  border: 'none',
+  showPlaceholder: true,
+  placeholder: '组合',
+})
+
+const containerStyle = computed<CSSProperties>(() => ({
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  boxSizing: 'border-box',
+  opacity: props.opacity,
+  display: props.visible ? 'block' : 'none',
+  transform: props.rotation ? `rotate(${props.rotation}deg)` : undefined,
+  borderRadius: props.borderRadius ? `${props.borderRadius}px` : undefined,
+  backgroundColor: props.backgroundColor,
+  border: props.border,
+}))
+</script>
+
+<style scoped>
+.group-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.group-placeholder {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #909399;
+  font-size: 12px;
+  opacity: 0.5;
+  pointer-events: none;
+}
+</style>

package/src/components/kpi/box/Box.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="v-box-container" :style="containerStyle">
+    <div class="v-box-content" :style="contentStyle">
+      {{ content }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    // 内容
+    content?: string
+
+    // 容器样式
+    opacity?: number
+    visible?: boolean
+    backgroundColor?: string
+    borderColor?: string
+    borderWidth?: number
+    borderStyle?: 'solid' | 'dashed' | 'dotted' | 'none'
+    borderRadius?: number
+    padding?: number
+    boxShadow?: string
+
+    // 文字样式
+    fontSize?: number
+    textColor?: string
+    fontWeight?: 'normal' | 'bold' | 'lighter' | number
+    textAlign?: 'left' | 'center' | 'right' | 'justify'
+    lineHeight?: number
+  }>(),
+  {
+    content: 'Box Content',
+    opacity: 100,
+    visible: true,
+    backgroundColor: '#ffffff',
+    borderColor: '#dcdfe6',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderRadius: 4,
+    padding: 16,
+    boxShadow: 'none',
+    fontSize: 14,
+    textColor: '#606266',
+    fontWeight: 'normal',
+    textAlign: 'center',
+    lineHeight: 1.5,
+  },
+)
+
+// 计算容器样式
+const containerStyle = computed<CSSProperties>(() => {
+  return {
+    opacity: ((props.opacity ?? 100) as number) / 100,
+    display: props.visible === false ? 'none' : 'flex',
+    backgroundColor: props.backgroundColor ?? '#ffffff',
+    borderColor: props.borderColor ?? '#dcdfe6',
+    borderWidth: `${props.borderWidth ?? 1}px`,
+    borderStyle: props.borderStyle ?? 'solid',
+    borderRadius: `${props.borderRadius ?? 4}px`,
+    padding: `${props.padding ?? 16}px`,
+    boxShadow: props.boxShadow ?? 'none',
+    width: '100%',
+    height: '100%',
+    boxSizing: 'border-box',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }
+})
+
+// 计算内容样式
+const contentStyle = computed<CSSProperties>(() => {
+  return {
+    fontSize: `${props.fontSize ?? 14}px`,
+    color: props.textColor ?? '#606266',
+    fontWeight: props.fontWeight ?? 'normal',
+    textAlign: props.textAlign ?? 'center',
+    lineHeight: props.lineHeight ?? 1.5,
+    wordBreak: 'break-word',
+    whiteSpace: 'pre-wrap',
+  }
+})
+</script>
+
+<style scoped>
+.v-box-container {
+  box-sizing: border-box;
+}
+
+.v-box-content {
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+</style>

package/src/components/kpi/countUp/CountUp.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="v-countup-container" :style="containerStyle">
+    <el-statistic
+      :value="animatedValue"
+      :precision="decimals"
+      :prefix="showPrefix ? prefix : ''"
+      :suffix="showSuffix ? suffix : ''"
+      :value-style="valueStyleComputed"
+      :title="title"
+      :title-style="titleStyleComputed"
+    >
+      <!-- 自定义前缀插槽 -->
+      <template v-if="showPrefix && prefix && customPrefix" #prefix>
+        <span :style="prefixStyleComputed">{{ prefix }}</span>
+      </template>
+      <!-- 自定义后缀插槽 -->
+      <template v-if="showSuffix && suffix && customSuffix" #suffix>
+        <span :style="suffixStyleComputed">{{ suffix }}</span>
+      </template>
+    </el-statistic>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, watch, ref } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ElStatistic } from 'element-plus'
+
+// 定义纯 UI Props，无业务逻辑
+const props = defineProps<{
+  // 核心数据
+  value?: number
+  title?: string
+  startValue?: number
+  duration?: number
+  decimals?: number
+  prefix?: string
+  suffix?: string
+  showPrefix?: boolean
+  showSuffix?: boolean
+  useEasing?: boolean
+  customPrefix?: boolean
+  customSuffix?: boolean
+
+  // 容器样式
+  opacity?: number
+  visible?: boolean
+  backgroundColor?: string
+  borderColor?: string
+  borderWidth?: number
+  borderRadius?: number
+  padding?: number
+  align?: 'flex-start' | 'center' | 'flex-end'
+
+  // 数值样式
+  valueColor?: string
+  valueFontSize?: number
+  valueFontWeight?: 'normal' | 'bold' | 'lighter' | number
+  fontFamily?: string
+
+  // 前缀样式
+  prefixColor?: string
+  prefixFontSize?: number
+  prefixFontWeight?: 'normal' | 'bold' | 'lighter' | number
+
+  // 后缀样式
+  suffixColor?: string
+  suffixFontSize?: number
+  suffixFontWeight?: 'normal' | 'bold' | 'lighter' | number
+
+  // 标题样式
+  titleColor?: string
+  titleFontSize?: number
+  titleFontWeight?: 'normal' | 'bold' | 'lighter' | number
+}>()
+
+// 当前显示值（用于动画）
+const animatedValue = ref(0)
+
+// 缓动函数
+function easeOutExpo(t: number, b: number, c: number, d: number): number {
+  return c * (-Math.pow(2, (-10 * t) / d) + 1) + b
+}
+
+// 数字动画
+function animateValue(start: number, end: number) {
+  const startTime = Date.now()
+  const dur = (props.duration ?? 2) * 1000 // Convert seconds to ms
+  const useEase = props.useEasing !== false
+
+  function update() {
+    const currentTime = Date.now()
+    const elapsed = currentTime - startTime
+
+    if (elapsed < dur) {
+      const progress = elapsed / dur
+      if (useEase) {
+        animatedValue.value = easeOutExpo(elapsed, start, end - start, dur)
+      } else {
+        animatedValue.value = start + (end - start) * progress
+      }
+      requestAnimationFrame(update)
+    } else {
+      animatedValue.value = end
+    }
+  }
+
+  update()
+}
+
+// 监听目标值变化
+watch(
+  () => props.value,
+  (newVal, oldVal) => {
+    const start = oldVal ?? props.startValue ?? 0
+    const end = newVal ?? 0
+    animateValue(start, end)
+  },
+  { immediate: true },
+)
+
+// 容器样式
+const containerStyle = computed<CSSProperties>(() => {
+  return {
+    opacity: ((props.opacity ?? 100) as number) / 100,
+    display: props.visible === false ? 'none' : 'flex',
+    backgroundColor: props.backgroundColor ?? 'transparent',
+    borderColor: props.borderColor ?? 'transparent',
+    borderWidth: `${props.borderWidth ?? 0}px`,
+    borderStyle: 'solid',
+    borderRadius: `${props.borderRadius ?? 0}px`,
+    padding: `${props.padding ?? 10}px`,
+    justifyContent: props.align ?? 'center',
+    alignItems: 'center',
+    width: '100%',
+    height: '100%',
+    boxSizing: 'border-box',
+  }
+})
+
+// 数值样式
+const valueStyleComputed = computed<CSSProperties>(() => {
+  return {
+    color: props.valueColor ?? '#303133',
+    fontSize: `${props.valueFontSize ?? 32}px`,
+    fontWeight: props.valueFontWeight ?? 'bold',
+    fontFamily: props.fontFamily ?? 'inherit',
+  }
+})
+
+// 前缀样式
+const prefixStyleComputed = computed<CSSProperties>(() => {
+  return {
+    color: props.prefixColor ?? '#909399',
+    fontSize: `${props.prefixFontSize ?? 16}px`,
+    fontWeight: props.prefixFontWeight ?? 'normal',
+    marginRight: '8px',
+  }
+})
+
+// 后缀样式
+const suffixStyleComputed = computed<CSSProperties>(() => {
+  return {
+    color: props.suffixColor ?? '#909399',
+    fontSize: `${props.suffixFontSize ?? 16}px`,
+    fontWeight: props.suffixFontWeight ?? 'normal',
+    marginLeft: '8px',
+  }
+})
+
+// 标题样式
+const titleStyleComputed = computed<CSSProperties>(() => {
+  return {
+    color: props.titleColor ?? '#909399',
+    fontSize: `${props.titleFontSize ?? 14}px`,
+    fontWeight: props.titleFontWeight ?? 'normal',
+  }
+})
+</script>
+
+<style scoped>
+.v-countup-container {
+  box-sizing: border-box;
+}
+
+:deep(.el-statistic) {
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+</style>