@vela-studio/ui 1.0.1

package/src/components/media/image/Image.vue

@@ -0,0 +1,132 @@
+<template>
+  <div :style="containerStyle">
+    <el-image
+      v-if="url"
+      :src="url"
+      :alt="alt"
+      :style="imageStyle"
+      :fit="fit"
+      :lazy="lazy"
+      :preview-src-list="preview ? [url] : undefined"
+      :z-index="previewZIndex"
+      :initial-index="0"
+      :hide-on-click-modal="hideOnClickModal"
+      :preview-teleported="true"
+    >
+      <template #error>
+        <div class="image-error">
+          <el-icon><Picture /></el-icon>
+          <span>{{ errorText }}</span>
+        </div>
+      </template>
+      <template #placeholder>
+        <div class="image-loading">
+          <el-icon class="is-loading"><Loading /></el-icon>
+        </div>
+      </template>
+    </el-image>
+    <div v-else class="image-placeholder">
+      <el-icon><Picture /></el-icon>
+      <span>{{ placeholder }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { Picture, Loading } from '@element-plus/icons-vue'
+import { ElImage, ElIcon } from 'element-plus'
+
+const props = withDefaults(
+  defineProps<{
+    url?: string
+    alt?: string
+    fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+    lazy?: boolean
+    preview?: boolean
+    previewZIndex?: number
+    hideOnClickModal?: boolean
+    placeholder?: string
+    errorText?: string
+    backgroundColor?: string
+    borderRadius?: number | string
+    border?: string
+    objectFit?: string
+    opacity?: number | string
+  }>(),
+  {
+    url: '',
+    fit: 'cover',
+    lazy: true,
+    preview: false,
+    previewZIndex: 2000,
+    hideOnClickModal: true,
+    placeholder: '请设置图片地址',
+    errorText: '图片加载失败',
+    backgroundColor: 'transparent',
+    borderRadius: 0,
+    border: 'none',
+    objectFit: 'cover',
+    opacity: 1, // 默认为 1
+  },
+)
+
+// 样式
+const containerStyle = computed<CSSProperties>(() => ({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  justifyContent: props.objectFit === 'contain' ? 'center' : 'flex-start',
+  alignItems: props.objectFit === 'contain' ? 'center' : 'flex-start',
+  backgroundColor: props.backgroundColor,
+  borderRadius:
+    typeof props.borderRadius === 'number' ? `${props.borderRadius}px` : props.borderRadius,
+  overflow: 'hidden',
+  border: props.border,
+  opacity: typeof props.opacity === 'number' ? props.opacity : parseFloat(props.opacity || '1'),
+}))
+
+const imageStyle = computed<CSSProperties>(() => ({
+  width: '100%',
+  height: '100%',
+  objectFit: props.objectFit as CSSProperties['objectFit'],
+}))
+</script>
+
+<style scoped>
+.image-error,
+.image-loading,
+.image-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;
+}
+
+.image-error .el-icon,
+.image-loading .el-icon,
+.image-placeholder .el-icon {
+  font-size: 48px;
+  color: #c0c4cc;
+}
+
+.is-loading {
+  animation: rotating 2s linear infinite;
+}
+
+@keyframes rotating {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/media/video/Video.vue

@@ -0,0 +1,115 @@
+<template>
+  <div :style="containerStyle">
+    <video
+      v-if="url"
+      ref="videoRef"
+      :src="url"
+      :poster="poster"
+      :style="videoStyle"
+      :controls="controls"
+      :autoplay="autoplay"
+      :loop="loop"
+      :muted="muted"
+      :preload="preload"
+      :playsinline="true"
+      :controlslist="noDownload ? 'nodownload' : undefined"
+      :disablepictureinpicture="noPictureInPicture"
+    >
+      您的浏览器不支持视频播放
+    </video>
+    <div v-else class="video-placeholder">
+      <el-icon><VideoPlay /></el-icon>
+      <span>{{ placeholder }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { CSSProperties } from 'vue'
+import { VideoPlay } from '@element-plus/icons-vue'
+import { ElIcon } from 'element-plus'
+
+const props = withDefaults(
+  defineProps<{
+    url?: string
+    poster?: string
+    controls?: boolean
+    autoplay?: boolean
+    loop?: boolean
+    muted?: boolean
+    preload?: 'none' | 'metadata' | 'auto'
+    noDownload?: boolean
+    noPictureInPicture?: boolean
+    placeholder?: string
+    backgroundColor?: string
+    borderRadius?: number
+    border?: string
+    objectFit?: 'fill' | 'contain' | 'cover' | 'none'
+    opacity?: number
+  }>(),
+  {
+    url: '',
+    poster: '',
+    controls: true,
+    autoplay: false,
+    loop: false,
+    muted: false,
+    preload: 'metadata',
+    noDownload: false,
+    noPictureInPicture: false,
+    placeholder: '请设置视频地址',
+    backgroundColor: '#000000',
+    borderRadius: 0,
+    border: 'none',
+    objectFit: 'contain',
+    opacity: 100,
+  },
+)
+
+const videoRef = ref<HTMLVideoElement>()
+
+// 样式
+const containerStyle = computed<CSSProperties>(() => ({
+  width: '100%',
+  height: '100%',
+  backgroundColor: props.backgroundColor,
+  borderRadius: `${props.borderRadius}px`,
+  overflow: 'hidden',
+  border: props.border,
+}))
+
+const videoStyle = computed<CSSProperties>(() => ({
+  width: '100%',
+  height: '100%',
+  objectFit: props.objectFit,
+  opacity: props.opacity / 100,
+}))
+
+// 暴露方法供外部调用
+defineExpose({
+  play: () => videoRef.value?.play(),
+  pause: () => videoRef.value?.pause(),
+  getVideoElement: () => videoRef.value,
+})
+</script>
+
+<style scoped>
+.video-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: #000000;
+}
+
+.video-placeholder .el-icon {
+  font-size: 64px;
+  color: #606266;
+}
+</style>

package/src/components/v2/basic/BaseButton.vue

@@ -0,0 +1,179 @@
+<template>
+  <button
+    class="v-button"
+    :class="[
+      `v-button--${type}`,
+      `v-button--${size}`,
+      {
+        'is-disabled': disabled,
+        'is-loading': loading,
+        'is-plain': plain,
+        'is-round': round,
+        'is-circle': circle,
+      },
+    ]"
+    :disabled="disabled || loading"
+    :style="customStyle"
+    @click="handleClick"
+  >
+    <i v-if="loading" class="el-icon-loading" />
+    <i v-else-if="icon" :class="icon" />
+    <span v-if="$slots.default"><slot /></span>
+    <span v-else>{{ text }}</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+
+/**
+ * Button V2 (UI Layer)
+ * 纯粹的展示组件，严格遵循 Core Schema 定义
+ */
+
+export interface ButtonStyleConfig {
+  backgroundColor?: string
+  textColor?: string
+  fontSize?: number
+  fontWeight?: number | string
+  borderRadius?: number
+  borderColor?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    // 1. 基础原子属性 (与 Core Schema 对应)
+    text?: string
+    type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'
+    size?: 'large' | 'default' | 'small'
+    plain?: boolean
+    round?: boolean
+    circle?: boolean
+    disabled?: boolean
+    loading?: boolean
+    icon?: string
+
+    // 2. 样式配置对象 (V2 特性)
+    styleConfig?: ButtonStyleConfig
+  }>(),
+  {
+    text: '',
+    type: 'primary',
+    size: 'default',
+    styleConfig: () => ({}),
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void
+}>()
+
+// 计算动态样式
+const customStyle = computed<CSSProperties>(() => {
+  const { styleConfig } = props
+  const style: CSSProperties = {}
+
+  if (styleConfig.backgroundColor) {
+    style.backgroundColor = styleConfig.backgroundColor
+    // 如果设置了背景色且不是 plain 模式，边框色默认跟随背景色
+    if (!props.plain) {
+      style.borderColor = styleConfig.backgroundColor
+    }
+  }
+
+  if (styleConfig.textColor) style.color = styleConfig.textColor
+  if (styleConfig.fontSize) style.fontSize = `${styleConfig.fontSize}px`
+  if (styleConfig.fontWeight) style.fontWeight = styleConfig.fontWeight
+  if (styleConfig.borderRadius !== undefined) style.borderRadius = `${styleConfig.borderRadius}px`
+  if (styleConfig.borderColor) style.borderColor = styleConfig.borderColor
+
+  return style
+})
+
+const handleClick = (e: MouseEvent) => {
+  if (!props.disabled && !props.loading) {
+    emit('click', e)
+  }
+}
+</script>
+
+<style scoped>
+.v-button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  height: 32px;
+  white-space: nowrap;
+  cursor: pointer;
+  color: #606266;
+  text-align: center;
+  box-sizing: border-box;
+  outline: none;
+  margin: 0;
+  transition: 0.1s;
+  font-weight: 500;
+  user-select: none;
+  vertical-align: middle;
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  padding: 8px 15px;
+  font-size: 14px;
+  border-radius: 4px;
+}
+
+.v-button:hover,
+.v-button:focus {
+  color: #409eff;
+  border-color: #c6e2ff;
+  background-color: #ecf5ff;
+}
+
+.v-button:active {
+  color: #3a8ee6;
+  border-color: #3a8ee6;
+  outline: none;
+}
+
+/* Disabled */
+.v-button.is-disabled {
+  color: #c0c4cc;
+  cursor: not-allowed;
+  background-image: none;
+  background-color: #fff;
+  border-color: #ebeef5;
+}
+
+/* Sizes */
+.v-button--large {
+  height: 40px;
+  padding: 12px 19px;
+  font-size: 14px;
+}
+.v-button--small {
+  height: 24px;
+  padding: 5px 11px;
+  font-size: 12px;
+}
+
+/* Types (Simplified for Demo) */
+.v-button--primary {
+  color: #fff;
+  background-color: #409eff;
+  border-color: #409eff;
+}
+.v-button--primary:not(.is-disabled):hover {
+  background-color: #66b1ff;
+  border-color: #66b1ff;
+}
+
+/* Round/Circle */
+.v-button.is-round {
+  border-radius: 20px;
+}
+.v-button.is-circle {
+  border-radius: 50%;
+  padding: 8px;
+  min-width: 32px;
+}
+</style>

package/src/components/v2/kpi/KpiCard.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="v-stat-card" :style="containerStyle">
+    <!-- Header -->
+    <div v-if="header?.title" class="v-stat-card__header">
+      <span class="v-stat-card__title" :style="titleStyle">{{ header.title }}</span>
+      <i
+        v-if="header.tooltip"
+        class="v-stat-card__tooltip-icon el-icon-info"
+        :title="header.tooltip"
+        >ℹ️</i
+      >
+    </div>
+
+    <!-- Content -->
+    <div class="v-stat-card__content">
+      <div class="v-stat-card__value-wrapper">
+        <span v-if="content?.prefix" class="v-stat-card__prefix">{{ content.prefix }}</span>
+        <span class="v-stat-card__value" :style="valueStyle">{{ formattedValue }}</span>
+        <span v-if="content?.suffix" class="v-stat-card__suffix">{{ content.suffix }}</span>
+      </div>
+    </div>
+
+    <!-- Footer / Trend -->
+    <div v-if="footer?.trend" class="v-stat-card__footer">
+      <div class="v-stat-card__trend" :class="`is-${footer.trend.type || 'normal'}`">
+        <span v-if="footer.trend.label" class="trend-label">{{ footer.trend.label }}</span>
+        <span class="trend-value">{{ footer.trend.value }}</span>
+        <span class="trend-icon">
+          {{ footer.trend.type === 'up' ? '↑' : footer.trend.type === 'down' ? '↓' : '-' }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+
+export interface StatHeader {
+  title?: string
+  tooltip?: string
+}
+
+export interface StatContent {
+  value?: number | string
+  prefix?: string
+  suffix?: string
+  precision?: number // 小数精度
+  separator?: boolean // 千分位
+}
+
+export interface StatTrend {
+  value?: string
+  label?: string
+  type?: 'up' | 'down' | 'normal'
+}
+
+export interface StatFooter {
+  trend?: StatTrend
+}
+
+export interface StatStyle {
+  background?: {
+    color?: string
+    image?: string
+  }
+  border?: {
+    width?: number
+    color?: string
+    radius?: number
+  }
+  padding?: number
+  shadow?: string
+
+  // 具体的文字样式
+  titleColor?: string
+  titleSize?: number
+  valueColor?: string
+  valueSize?: number
+  valueWeight?: number | string
+}
+
+const props = withDefaults(
+  defineProps<{
+    header?: StatHeader
+    content?: StatContent
+    footer?: StatFooter
+    styleConfig?: StatStyle
+  }>(),
+  {
+    header: () => ({}),
+    content: () => ({ value: 0 }),
+    footer: () => ({}),
+    styleConfig: () => ({}),
+  },
+)
+
+// 格式化数值
+const formattedValue = computed(() => {
+  let val = props.content.value
+
+  if (typeof val === 'number') {
+    // 精度处理
+    if (props.content.precision !== undefined) {
+      val = val.toFixed(props.content.precision)
+    }
+    // 千分位
+    if (props.content.separator) {
+      val = Number(val).toLocaleString()
+    }
+  }
+
+  return val
+})
+
+// 容器样式
+const containerStyle = computed<CSSProperties>(() => {
+  const { styleConfig } = props
+  return {
+    backgroundColor: styleConfig.background?.color || '#fff',
+    backgroundImage: styleConfig.background?.image
+      ? `url(${styleConfig.background.image})`
+      : undefined,
+    borderWidth:
+      styleConfig.border?.width !== undefined ? `${styleConfig.border.width}px` : undefined,
+    borderColor: styleConfig.border?.color,
+    borderStyle: styleConfig.border?.width ? 'solid' : undefined,
+    borderRadius:
+      styleConfig.border?.radius !== undefined ? `${styleConfig.border.radius}px` : '4px',
+    padding: styleConfig.padding !== undefined ? `${styleConfig.padding}px` : '16px',
+    boxShadow: styleConfig.shadow || '0 2px 12px 0 rgba(0,0,0,0.1)',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    height: '100%',
+    boxSizing: 'border-box',
+  }
+})
+
+const titleStyle = computed<CSSProperties>(() => ({
+  color: props.styleConfig.titleColor || '#909399',
+  fontSize: props.styleConfig.titleSize ? `${props.styleConfig.titleSize}px` : '14px',
+}))
+
+const valueStyle = computed<CSSProperties>(() => ({
+  color: props.styleConfig.valueColor || '#303133',
+  fontSize: props.styleConfig.valueSize ? `${props.styleConfig.valueSize}px` : '24px',
+  fontWeight: props.styleConfig.valueWeight || 'bold',
+  fontFamily:
+    'Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif',
+}))
+</script>
+
+<style scoped>
+.v-stat-card__header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.v-stat-card__tooltip-icon {
+  margin-left: 4px;
+  cursor: help;
+  font-size: 12px;
+  color: #909399;
+}
+
+.v-stat-card__content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.v-stat-card__value-wrapper {
+  display: flex;
+  align-items: baseline;
+}
+
+.v-stat-card__prefix,
+.v-stat-card__suffix {
+  font-size: 14px;
+  color: #606266;
+  margin: 0 4px;
+}
+
+.v-stat-card__footer {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #ebeef5;
+}
+
+.v-stat-card__trend {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+}
+
+.v-stat-card__trend.is-up {
+  color: #f56c6c;
+}
+.v-stat-card__trend.is-down {
+  color: #67c23a;
+}
+.v-stat-card__trend.is-normal {
+  color: #909399;
+}
+
+.trend-label {
+  margin-right: 8px;
+}
+.trend-icon {
+  margin-left: 4px;
+  font-weight: bold;
+}
+</style>

package/src/components/v2/layout/GridBox.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="v-grid" :style="gridStyle">
+    <slot v-if="$slots.default" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+
+export interface GridLayoutConfig {
+  columns?: number
+  gap?: number
+  rowGap?: number
+  autoRows?: string // e.g. 'minmax(100px, auto)'
+  alignItems?: 'start' | 'end' | 'center' | 'stretch'
+  justifyItems?: 'start' | 'end' | 'center' | 'stretch'
+}
+
+const props = withDefaults(
+  defineProps<{
+    layout?: GridLayoutConfig
+    // 高度，通常由外部容器控制，但作为布局容器可能需要自适应
+    height?: string | number
+  }>(),
+  {
+    layout: () => ({ columns: 2, gap: 10 }),
+    height: '100%',
+  },
+)
+
+const gridStyle = computed<CSSProperties>(() => {
+  const { layout } = props
+
+  return {
+    display: 'grid',
+    gridTemplateColumns: `repeat(${layout.columns ?? 2}, 1fr)`,
+    gap: `${layout.gap ?? 0}px ${layout.gap ?? 0}px`,
+    rowGap: layout.rowGap !== undefined ? `${layout.rowGap}px` : undefined,
+    gridAutoRows: layout.autoRows || 'min-content',
+    alignItems: layout.alignItems || 'stretch',
+    justifyItems: layout.justifyItems || 'stretch',
+    height: typeof props.height === 'number' ? `${props.height}px` : props.height,
+    width: '100%',
+    boxSizing: 'border-box',
+  }
+})
+</script>
+
+<style scoped>
+.v-grid {
+  /* 确保网格容器自身也是干净的 */
+  margin: 0;
+  padding: 0;
+}
+</style>