@vela-studio/ui 1.0.1

package/src/components/kpi/progress/Progress.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="v-progress-container" :style="containerStyle">
+    <el-progress
+      :percentage="percentage"
+      :type="type"
+      :status="status"
+      :stroke-width="strokeWidth"
+      :text-inside="textInside"
+      :show-text="showText"
+      :color="computedColor"
+      :format="formatText"
+      :width="circleWidth"
+      :stroke-linecap="strokeLinecap"
+      :striped="showStripe"
+      :striped-flow="animateStripe"
+      class="custom-progress"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ElProgress } from 'element-plus'
+
+// 颜色配置类型
+interface ColorStop {
+  color: string
+  percentage: number
+}
+
+// 定义纯 UI Props，无业务逻辑
+const props = withDefaults(
+  defineProps<{
+    // 核心数据
+    percentage?: number
+    type?: 'line' | 'circle' | 'dashboard'
+    status?: '' | 'success' | 'exception' | 'warning'
+
+    // 进度条配置
+    strokeWidth?: number
+    textInside?: boolean
+    showText?: boolean
+    showStripe?: boolean
+    animateStripe?: boolean
+    circleWidth?: number
+    strokeLinecap?: 'butt' | 'round' | 'square'
+    textFormat?: string
+
+    // 颜色配置
+    barColor?: string
+    trackColor?: string
+    textColor?: string
+    successColor?: string
+    warningColor?: string
+    exceptionColor?: string
+    useGradient?: boolean
+
+    // 容器样式
+    opacity?: number
+    visible?: boolean
+    backgroundColor?: string
+    borderColor?: string
+    borderWidth?: number
+    borderRadius?: number
+    padding?: number
+  }>(),
+  {
+    percentage: 0,
+    type: 'line',
+    status: '',
+    strokeWidth: 6,
+    textInside: false,
+    showText: true,
+    showStripe: false,
+    animateStripe: false,
+    circleWidth: 126,
+    strokeLinecap: 'round',
+    textFormat: '{value}%',
+    opacity: 100,
+    visible: true,
+    backgroundColor: 'transparent',
+    borderColor: 'transparent',
+    borderWidth: 0,
+    borderRadius: 0,
+    padding: 10,
+    barColor: '#409eff',
+    trackColor: '#e4e7ed',
+    textColor: '#606266',
+  },
+)
+
+// 计算颜色
+const computedColor = computed<string | ColorStop[]>(() => {
+  const barColor = props.barColor
+  const successColor = props.successColor ?? '#67c23a'
+  const warningColor = props.warningColor ?? '#e6a23c'
+  const exceptionColor = props.exceptionColor ?? '#f56c6c'
+
+  // 根据状态返回对应颜色
+  if (props.status) {
+    if (props.status === 'success') return successColor
+    if (props.status === 'warning') return warningColor
+    if (props.status === 'exception') return exceptionColor
+  }
+
+  // 使用渐变色
+  if (props.useGradient) {
+    return [
+      { color: exceptionColor, percentage: 20 },
+      { color: warningColor, percentage: 50 },
+      { color: successColor, percentage: 100 },
+    ]
+  }
+
+  return barColor
+})
+
+// 格式化文本
+const formatText = (percentage: number) => {
+  const format = props.textFormat
+  return format.replace('{value}', percentage.toFixed(0))
+}
+
+// 容器样式
+const containerStyle = computed<CSSProperties>(() => {
+  return {
+    opacity: props.opacity / 100,
+    display: props.visible === false ? 'none' : 'flex',
+    backgroundColor: props.backgroundColor,
+    borderColor: props.borderColor,
+    borderWidth: `${props.borderWidth}px`,
+    borderStyle: 'solid',
+    borderRadius: `${props.borderRadius}px`,
+    padding: `${props.padding}px`,
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    '--el-fill-color-light': props.trackColor, // Hack: Element Plus track color
+  } as CSSProperties
+})
+</script>
+
+<style scoped>
+.v-progress-container {
+  box-sizing: border-box;
+}
+
+:deep(.el-progress) {
+  width: 100%;
+}
+
+:deep(.el-progress__text) {
+  font-size: inherit !important;
+  color: v-bind('props.textColor');
+}
+</style>

package/src/components/kpi/stat/Stat.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="v-stat-card" :style="cardStyle">
+    <div class="v-stat-header">
+      <div class="v-stat-title" :style="titleStyleComputed">{{ title }}</div>
+    </div>
+    <div class="v-stat-body">
+      <div v-if="icon" class="v-stat-icon" :style="iconStyle">
+        <i :class="icon"></i>
+      </div>
+      <div class="v-stat-value" :style="valueStyleComputed">{{ formattedValue }}{{ suffix }}</div>
+    </div>
+    <div v-if="showChange && (change ?? 0) !== 0" class="v-stat-footer">
+      <span class="v-stat-change" :style="changeStyleComputed">
+        {{ (change ?? 0) > 0 ? '+' : '' }}{{ (change ?? 0).toFixed(1) }}%
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+
+// 定义纯 UI Props，无业务逻辑
+const props = withDefaults(
+  defineProps<{
+    // 数据
+    title?: string
+    value?: number
+    change?: number
+    suffix?: string
+    icon?: string
+    precision?: number
+    showChange?: boolean
+
+    // 卡片样式
+    opacity?: number
+    visible?: boolean
+    backgroundColor?: string
+    borderColor?: string
+    borderWidth?: number
+    borderRadius?: number
+    boxShadow?: string
+    padding?: number
+
+    // 标题样式
+    titleColor?: string
+    titleFontSize?: number
+    titleFontWeight?: 'normal' | 'bold' | 'lighter' | number
+
+    // 数值样式
+    valueColor?: string
+    valueFontSize?: number
+    valueFontWeight?: 'normal' | 'bold' | 'lighter' | number
+
+    // 变化率样式
+    changeFontSize?: number
+    changeFontWeight?: 'normal' | 'bold' | 'lighter' | number
+    changeColorPositive?: string
+    changeColorNegative?: string
+
+    // 图标样式
+    iconColor?: string
+    iconSize?: number
+  }>(),
+  {
+    title: 'Statistic Title',
+    value: 0,
+    change: 0,
+    suffix: '',
+    icon: '',
+    precision: 0,
+    showChange: false,
+    opacity: 100,
+    visible: true,
+    backgroundColor: '#fff',
+    borderColor: '#e0e0e0',
+    borderWidth: 1,
+    borderRadius: 8,
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+    padding: 20,
+    titleColor: '#909399',
+    titleFontSize: 14,
+    titleFontWeight: 'normal',
+    valueColor: '#303133',
+    valueFontSize: 24,
+    valueFontWeight: 'bold',
+    changeFontSize: 14,
+    changeFontWeight: 500,
+    changeColorPositive: '#28a745',
+    changeColorNegative: '#dc3545',
+    iconColor: '#409eff',
+    iconSize: 32,
+  },
+)
+
+// 格式化显示值
+const formattedValue = computed(() => {
+  const val = props.value
+  const prec = props.precision
+  return val.toLocaleString(undefined, {
+    minimumFractionDigits: prec,
+    maximumFractionDigits: prec,
+  })
+})
+
+// 卡片样式
+const cardStyle = computed<CSSProperties>(() => {
+  return {
+    opacity: props.opacity / 100,
+    display: props.visible === false ? 'none' : 'flex',
+    backgroundColor: props.backgroundColor,
+    borderColor: props.borderColor,
+    borderWidth: `${props.borderWidth}px`,
+    borderStyle: 'solid',
+    borderRadius: `${props.borderRadius}px`,
+    boxShadow: props.boxShadow,
+    padding: `${props.padding}px`,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    width: '100%',
+    height: '100%',
+    boxSizing: 'border-box',
+  }
+})
+
+// 标题样式
+const titleStyleComputed = computed<CSSProperties>(() => {
+  return {
+    color: props.titleColor,
+    fontSize: `${props.titleFontSize}px`,
+    fontWeight: props.titleFontWeight,
+    margin: 0,
+  }
+})
+
+// 数值样式
+const valueStyleComputed = computed<CSSProperties>(() => {
+  return {
+    color: props.valueColor,
+    fontSize: `${props.valueFontSize}px`,
+    fontWeight: props.valueFontWeight,
+    lineHeight: 1,
+  }
+})
+
+// 变化率样式
+const changeStyleComputed = computed<CSSProperties>(() => {
+  const changeVal = props.change
+  const color = changeVal > 0 ? props.changeColorPositive : props.changeColorNegative
+  return {
+    color,
+    fontSize: `${props.changeFontSize}px`,
+    fontWeight: props.changeFontWeight,
+  }
+})
+
+// 图标样式
+const iconStyle = computed<CSSProperties>(() => {
+  return {
+    fontSize: `${props.iconSize}px`,
+    color: props.iconColor,
+  }
+})
+</script>
+
+<style scoped>
+.v-stat-card {
+  box-sizing: border-box;
+}
+
+.v-stat-header {
+  margin-bottom: 8px;
+}
+
+.v-stat-title {
+  font-size: 14px;
+  color: #909399;
+  margin: 0;
+}
+
+.v-stat-body {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.v-stat-icon {
+  display: flex;
+  align-items: center;
+}
+
+.v-stat-value {
+  line-height: 1;
+}
+
+.v-stat-footer {
+  margin-top: 8px;
+}
+
+.v-stat-change {
+  font-weight: 500;
+}
+</style>

package/src/components/kpi/text/Text.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="v-text" :style="textStyle">
+    {{ content }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+
+// 定义纯 UI Props，无业务逻辑
+const props = withDefaults(
+  defineProps<{
+    // 内容
+    content?: string
+
+    // 样式配置
+    fontSize?: number | string // 标准化类型
+    color?: string // 标准化命名：原 fontColor
+    fontWeight?: 'normal' | 'bold' | 'lighter' | number | string
+    textAlign?: 'left' | 'center' | 'right' | 'justify'
+    letterSpacing?: number | string
+    lineHeight?: number | string
+    paddingX?: number
+    paddingY?: number
+    opacity?: number
+    visible?: boolean
+    locked?: boolean
+  }>(),
+  {
+    content: '文本内容',
+    fontSize: 16,
+    color: '#000000',
+    fontWeight: 'normal',
+    textAlign: 'left',
+    letterSpacing: 0,
+    lineHeight: 1.2,
+    paddingX: 0,
+    paddingY: 0,
+    opacity: 100,
+    visible: true,
+    locked: false,
+  },
+)
+
+// 计算文本样式
+const textStyle = computed<CSSProperties>(() => {
+  return {
+    opacity: props.opacity / 100,
+    display: props.visible === false ? 'none' : 'block',
+    fontSize: typeof props.fontSize === 'number' ? `${props.fontSize}px` : props.fontSize,
+    color: props.color,
+    fontWeight: props.fontWeight,
+    textAlign: props.textAlign,
+    letterSpacing:
+      typeof props.letterSpacing === 'number' ? `${props.letterSpacing}px` : props.letterSpacing,
+    lineHeight: props.lineHeight,
+    padding: `${props.paddingY}px ${props.paddingX}px`,
+    width: '100%',
+    height: '100%',
+    userSelect: props.locked ? 'none' : 'text',
+    pointerEvents: props.locked ? 'none' : 'auto',
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+  }
+})
+</script>
+
+<style scoped>
+.v-text {
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+</style>

package/src/components/layout/badge/Badge.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="v-badge-container" :style="containerStyle">
+    <el-badge
+      :value="value"
+      :type="type"
+      :is-dot="isDot"
+      :max="max"
+      :hidden="hidden"
+      :show-zero="showZero"
+      :offset="offset"
+    >
+      <slot>
+        <span :style="slotContentStyle">{{ slotText || 'Badge Content' }}</span>
+      </slot>
+    </el-badge>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ElBadge } from 'element-plus'
+
+// 定义纯 UI Props，无业务逻辑
+const props = withDefaults(
+  defineProps<{
+    // Badge 值
+    value?: string | number
+    type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+    isDot?: boolean
+    max?: number
+    hidden?: boolean
+    showZero?: boolean
+    offset?: [number, number]
+
+    // 默认插槽文本（当没有子组件时显示）
+    slotText?: string
+
+    // 容器样式
+    opacity?: number
+    visible?: boolean
+    padding?: number
+
+    // 插槽内容样式
+    slotFontSize?: number
+    slotColor?: string
+    slotPadding?: number
+  }>(),
+  {
+    value: '1',
+    type: 'primary',
+    isDot: false,
+    max: 99,
+    hidden: false,
+    showZero: false,
+    slotText: '徽章内容',
+    opacity: 100,
+    visible: true,
+    padding: 4,
+    slotFontSize: 14,
+    slotColor: '#303133',
+    slotPadding: 8,
+  },
+)
+
+// 容器样式
+const containerStyle = computed<CSSProperties>(() => {
+  return {
+    opacity: props.opacity / 100,
+    display: props.visible === false ? 'none' : 'inline-flex',
+    padding: `${props.padding}px`,
+    boxSizing: 'border-box',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }
+})
+
+// 插槽内容样式
+const slotContentStyle = computed<CSSProperties>(() => {
+  return {
+    fontSize: `${props.slotFontSize}px`,
+    color: props.slotColor,
+    padding: `${props.slotPadding}px`,
+  }
+})
+</script>
+
+<style scoped>
+.v-badge-container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+:deep(.el-badge) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:deep(.el-badge__content) {
+  font-size: inherit !important;
+}
+</style>

package/src/components/layout/col/Col.vue

@@ -0,0 +1,114 @@
+<template>
+  <el-col
+    :span="span"
+    :offset="offset"
+    :push="push"
+    :pull="pull"
+    :xs="xs"
+    :sm="sm"
+    :md="md"
+    :lg="lg"
+    :xl="xl"
+    :tag="tag"
+    :style="containerStyle"
+    class="v-col"
+  >
+    <slot>
+      <div class="v-col-placeholder" :style="placeholderStyle">
+        {{ placeholder }}
+      </div>
+    </slot>
+  </el-col>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ElCol } from 'element-plus'
+
+// 响应式尺寸类型
+type ResponsiveSize = number | { span?: number; offset?: number; push?: number; pull?: number }
+
+// 定义纯 UI Props
+const props = withDefaults(
+  defineProps<{
+    // Col 布局属性
+    span?: number
+    offset?: number
+    push?: number
+    pull?: number
+    xs?: ResponsiveSize
+    sm?: ResponsiveSize
+    md?: ResponsiveSize
+    lg?: ResponsiveSize
+    xl?: ResponsiveSize
+    tag?: string
+
+    // 容器样式
+    padding?: number
+    backgroundColor?: string
+    borderRadius?: number
+    borderWidth?: number
+    borderColor?: string
+    minHeight?: string
+
+    // 占位文本
+    placeholder?: string
+    textColor?: string
+    fontSize?: number
+  }>(),
+  {
+    span: 24,
+    offset: 0,
+    push: 0,
+    pull: 0,
+    tag: 'div',
+    padding: 0,
+    backgroundColor: 'transparent',
+    borderRadius: 0,
+    borderWidth: 0,
+    borderColor: '#dcdfe6',
+    minHeight: 'auto',
+    placeholder: '列布局容器 - 可拖入其他组件',
+    textColor: '#909399',
+    fontSize: 14,
+  },
+)
+
+// 容器样式
+const containerStyle = computed<CSSProperties>(() => {
+  return {
+    padding: `${props.padding}px`,
+    backgroundColor: props.backgroundColor,
+    borderRadius: `${props.borderRadius}px`,
+    borderWidth: `${props.borderWidth}px`,
+    borderStyle: props.borderWidth ? 'solid' : 'none',
+    borderColor: props.borderColor,
+    minHeight: props.minHeight,
+    boxSizing: 'border-box',
+  }
+})
+
+// 占位样式
+const placeholderStyle = computed<CSSProperties>(() => {
+  return {
+    width: '100%',
+    minHeight: '50px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: props.textColor,
+    fontSize: `${props.fontSize}px`,
+  }
+})
+</script>
+
+<style scoped>
+.v-col {
+  box-sizing: border-box;
+}
+
+.v-col-placeholder {
+  width: 100%;
+}
+</style>