@vela-studio/ui 1.0.1

package/src/components/controls/slider/Slider.vue

@@ -0,0 +1,167 @@
+<template>
+  <div :style="containerStyle">
+    <el-slider
+      v-model="internalValue"
+      :min="min"
+      :max="max"
+      :step="step"
+      :disabled="disabled"
+      :show-stops="showStops"
+      :show-tooltip="showTooltip"
+      :show-input="showInput"
+      :show-input-controls="showInputControls"
+      :format-tooltip="formatTooltipFn"
+      :range="range"
+      :vertical="vertical"
+      :height="height"
+      :marks="marks"
+      @change="handleChange"
+      @input="handleInput"
+    />
+    <div v-if="showValue" :style="valueStyle" class="slider-value">
+      {{ displayValue }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ElSlider } from 'element-plus'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number | number[]
+    min?: number
+    max?: number
+    step?: number
+    disabled?: boolean
+    showStops?: boolean
+    showTooltip?: boolean
+    showInput?: boolean
+    showInputControls?: boolean
+    range?: boolean
+    vertical?: boolean
+    height?: string
+    marks?: Record<number, string | { style?: CSSProperties; label: string }>
+    showValue?: boolean
+    valueFormat?: string
+    padding?: number
+    backgroundColor?: string
+    activeColor?: string
+    inactiveColor?: string
+    buttonSize?: number
+    valueFontSize?: number
+    valueColor?: string
+    valueAlign?: 'left' | 'center' | 'right'
+  }>(),
+  {
+    modelValue: 0,
+    min: 0,
+    max: 100,
+    step: 1,
+    disabled: false,
+    showStops: false,
+    showTooltip: true,
+    showInput: false,
+    showInputControls: true,
+    range: false,
+    vertical: false,
+    height: '200px',
+    marks: undefined,
+    showValue: true,
+    valueFormat: '{value}',
+    padding: 16,
+    backgroundColor: 'transparent',
+    activeColor: '#409eff',
+    inactiveColor: '#e4e7ed',
+    buttonSize: 20,
+    valueFontSize: 14,
+    valueColor: '#606266',
+    valueAlign: 'center',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | number[]]
+  change: [value: number | number[]]
+  input: [value: number | number[]]
+}>()
+
+// 内部值
+const internalValue = ref<number | number[]>(
+  props.range
+    ? Array.isArray(props.modelValue)
+      ? [...props.modelValue]
+      : [props.min, props.max]
+    : Array.isArray(props.modelValue)
+      ? props.modelValue[0]
+      : props.modelValue,
+)
+
+// 监听外部值变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (props.range) {
+      internalValue.value = Array.isArray(newVal) ? [...newVal] : [props.min, props.max]
+    } else {
+      internalValue.value = Array.isArray(newVal) ? newVal[0] : newVal
+    }
+  },
+)
+
+// 样式
+const containerStyle = computed<CSSProperties>(
+  () =>
+    ({
+      padding: `${props.padding}px`,
+      backgroundColor: props.backgroundColor,
+      '--el-slider-main-bg-color': props.activeColor,
+      '--el-slider-runway-bg-color': props.inactiveColor,
+      '--el-slider-button-size': `${props.buttonSize}px`,
+    }) as CSSProperties,
+)
+
+const valueStyle = computed<CSSProperties>(() => ({
+  marginTop: '8px',
+  fontSize: `${props.valueFontSize}px`,
+  color: props.valueColor,
+  textAlign: props.valueAlign,
+}))
+
+// 格式化提示
+const formatTooltipFn = (val: number) => {
+  return props.valueFormat.replace('{value}', String(val))
+}
+
+// 显示值
+const displayValue = computed(() => {
+  if (Array.isArray(internalValue.value)) {
+    return `${internalValue.value[0]} - ${internalValue.value[1]}`
+  }
+  return formatTooltipFn(internalValue.value)
+})
+
+// 事件处理
+const handleChange = (value: number | number[]) => {
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+
+const handleInput = (value: number | number[]) => {
+  emit('input', value)
+}
+</script>
+
+<style scoped>
+.slider-value {
+  margin-top: 8px;
+}
+
+:deep(.el-slider) {
+  --el-slider-main-bg-color: v-bind('containerStyle["--el-slider-main-bg-color"]');
+  --el-slider-runway-bg-color: v-bind('containerStyle["--el-slider-runway-bg-color"]');
+  --el-slider-button-size: v-bind('containerStyle["--el-slider-button-size"]');
+}
+</style>

package/src/components/controls/switch/Switch.vue

@@ -0,0 +1,107 @@
+<template>
+  <div :style="containerStyle">
+    <el-switch
+      v-model="internalValue"
+      :size="size"
+      :disabled="disabled"
+      :loading="loading"
+      :active-text="activeText"
+      :inactive-text="inactiveText"
+      :active-value="activeValue"
+      :inactive-value="inactiveValue"
+      :inline-prompt="inlinePrompt"
+      :active-icon="activeIcon"
+      :inactive-icon="inactiveIcon"
+      :width="width"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { CSSProperties, Component } from 'vue'
+import { ElSwitch } from 'element-plus'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean | string | number
+    size?: 'large' | 'default' | 'small'
+    disabled?: boolean
+    loading?: boolean
+    activeText?: string
+    inactiveText?: string
+    activeValue?: boolean | string | number
+    inactiveValue?: boolean | string | number
+    inlinePrompt?: boolean
+    activeIcon?: string | Component
+    inactiveIcon?: string | Component
+    padding?: number
+    backgroundColor?: string
+    activeColor?: string
+    inactiveColor?: string
+    borderColor?: string
+    width?: number | string
+  }>(),
+  {
+    modelValue: false,
+    size: 'default',
+    disabled: false,
+    loading: false,
+    activeText: '',
+    inactiveText: '',
+    activeValue: true,
+    inactiveValue: false,
+    inlinePrompt: false,
+    activeIcon: undefined,
+    inactiveIcon: undefined,
+    padding: 16,
+    backgroundColor: 'transparent',
+    activeColor: '#409eff',
+    inactiveColor: '#dcdfe6',
+    borderColor: '#dcdfe6',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean | string | number]
+  change: [value: boolean | string | number]
+}>()
+
+// 内部值
+const internalValue = ref<boolean | string | number>(props.modelValue)
+
+// 监听外部值变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    internalValue.value = newVal
+  },
+)
+
+// 样式
+const containerStyle = computed<CSSProperties>(
+  () =>
+    ({
+      padding: `${props.padding}px`,
+      backgroundColor: props.backgroundColor,
+      '--el-switch-on-color': props.activeColor,
+      '--el-switch-off-color': props.inactiveColor,
+      '--el-switch-border-color': props.borderColor,
+    }) as CSSProperties,
+)
+
+// 事件处理
+const handleChange = (value: boolean | string | number) => {
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+</script>
+
+<style scoped>
+:deep(.el-switch) {
+  --el-switch-on-color: v-bind('containerStyle["--el-switch-on-color"]');
+  --el-switch-off-color: v-bind('containerStyle["--el-switch-off-color"]');
+  --el-switch-border-color: v-bind('containerStyle["--el-switch-border-color"]');
+}
+</style>

package/src/components/data/cardGrid/CardGrid.vue

@@ -0,0 +1,318 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ElScrollbar, ElEmpty, ElCard, ElTag } from 'element-plus'
+
+export interface CardItem {
+  title?: string
+  description?: string
+  footer?: string
+  tags?: string[] | string
+  image?: string
+  [key: string]: unknown
+}
+
+const props = withDefaults(
+  defineProps<{
+    // 数据
+    data?: CardItem[]
+    // 字段映射
+    titleField?: string
+    descriptionField?: string
+    footerField?: string
+    tagsField?: string
+    imageField?: string
+    // 配置
+    showImage?: boolean
+    showTitle?: boolean
+    showDescription?: boolean
+    showTags?: boolean
+    showFooter?: boolean
+    cardShadow?: 'always' | 'hover' | 'never'
+    tagSize?: 'large' | 'default' | 'small'
+    emptyText?: string
+    scrollHeight?: string
+    columns?: number
+    gap?: number
+    // 样式
+    opacity?: number
+    visible?: boolean
+    backgroundColor?: string
+    borderRadius?: number
+    padding?: number
+    cardBorderRadius?: number
+    cardPadding?: number
+    imageHeight?: number
+    imageBorderRadius?: number
+    titleFontSize?: number
+    titleColor?: string
+    titleFontWeight?: string
+    descriptionFontSize?: number
+    descriptionColor?: string
+    footerFontSize?: number
+    footerColor?: string
+    footerBorderColor?: string
+  }>(),
+  {
+    data: () => [],
+    titleField: 'title',
+    descriptionField: 'description',
+    footerField: 'footer',
+    tagsField: 'tags',
+    imageField: 'image',
+    showImage: false,
+    showTitle: true,
+    showDescription: true,
+    showTags: false,
+    showFooter: false,
+    cardShadow: 'hover',
+    tagSize: 'small',
+    emptyText: '暂无数据',
+    scrollHeight: '100%',
+    columns: 3,
+    gap: 16,
+    opacity: 100,
+    visible: true,
+    backgroundColor: '#f5f7fa',
+    borderRadius: 4,
+    padding: 16,
+    cardBorderRadius: 4,
+    cardPadding: 14,
+    imageHeight: 150,
+    imageBorderRadius: 4,
+    titleFontSize: 16,
+    titleColor: '#303133',
+    titleFontWeight: '600',
+    descriptionFontSize: 13,
+    descriptionColor: '#606266',
+    footerFontSize: 12,
+    footerColor: '#909399',
+    footerBorderColor: '#ebeef5',
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'card-click', item: CardItem, index: number): void
+}>()
+
+// 默认数据
+const defaultData: CardItem[] = [
+  {
+    title: '卡片 1',
+    description: '这是卡片的描述信息',
+    footer: '2024-01-01',
+    tags: ['标签1', '标签2'],
+  },
+  { title: '卡片 2', description: '这是卡片的描述信息', footer: '2024-01-02', tags: ['标签3'] },
+  {
+    title: '卡片 3',
+    description: '这是卡片的描述信息',
+    footer: '2024-01-03',
+    tags: ['标签4', '标签5'],
+  },
+]
+
+const cardData = computed(() => (props.data.length > 0 ? props.data : defaultData))
+
+function getTitle(item: CardItem): string {
+  return String(item[props.titleField] ?? '')
+}
+
+function getDescription(item: CardItem): string {
+  return String(item[props.descriptionField] ?? '')
+}
+
+function getFooter(item: CardItem): string {
+  return String(item[props.footerField] ?? '')
+}
+
+function getTags(item: CardItem): string[] {
+  const tags = item[props.tagsField]
+  if (Array.isArray(tags)) return tags.map(String)
+  if (typeof tags === 'string') return tags.split(',').map((s) => s.trim())
+  return []
+}
+
+function getImage(item: CardItem): string {
+  return String(item[props.imageField] ?? '')
+}
+
+function getTagType(index: number): 'primary' | 'success' | 'info' | 'warning' | 'danger' {
+  const types: ('primary' | 'success' | 'info' | 'warning' | 'danger')[] = [
+    'primary',
+    'success',
+    'info',
+    'warning',
+    'danger',
+  ]
+  return types[index % types.length]
+}
+
+// 样式
+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 gridStyle = computed<CSSProperties>(() => ({
+  display: 'grid',
+  gridTemplateColumns: `repeat(${props.columns}, 1fr)`,
+  gap: `${props.gap}px`,
+}))
+
+const cardStyle = computed<CSSProperties>(() => ({
+  cursor: 'pointer',
+  transition: 'all 0.3s',
+  borderRadius: `${props.cardBorderRadius}px`,
+}))
+
+const cardBodyStyle = computed(() => ({
+  padding: `${props.cardPadding}px`,
+}))
+
+const imageStyle = computed<CSSProperties>(() => ({
+  width: '100%',
+  height: `${props.imageHeight}px`,
+  marginBottom: '12px',
+  borderRadius: `${props.imageBorderRadius}px`,
+  overflow: 'hidden',
+}))
+
+const titleStyle = computed<CSSProperties>(() => ({
+  fontSize: `${props.titleFontSize}px`,
+  color: props.titleColor,
+  fontWeight: props.titleFontWeight,
+  marginBottom: '8px',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+}))
+
+const descriptionStyle = computed<CSSProperties>(() => ({
+  fontSize: `${props.descriptionFontSize}px`,
+  color: props.descriptionColor,
+  lineHeight: 1.6,
+  marginBottom: '8px',
+}))
+
+const footerStyle = computed<CSSProperties>(() => ({
+  fontSize: `${props.footerFontSize}px`,
+  color: props.footerColor,
+  marginTop: '8px',
+  paddingTop: '8px',
+  borderTop: `1px solid ${props.footerBorderColor}`,
+}))
+
+const tagStyle = computed<CSSProperties>(() => ({
+  marginRight: '6px',
+  marginTop: '6px',
+}))
+
+function handleCardClick(item: CardItem, index: number) {
+  emit('card-click', item, index)
+}
+</script>
+
+<template>
+  <div class="card-grid-container" :style="containerStyle">
+    <el-scrollbar :height="scrollHeight">
+      <div v-if="cardData.length === 0" class="empty-state">
+        <el-empty :description="emptyText" :image-size="80" />
+      </div>
+      <div v-else class="grid-wrapper" :style="gridStyle">
+        <el-card
+          v-for="(item, index) in cardData"
+          :key="index"
+          :shadow="cardShadow"
+          :body-style="cardBodyStyle"
+          class="grid-card"
+          :style="cardStyle"
+          @click="handleCardClick(item, index)"
+        >
+          <!-- 卡片图片 -->
+          <div v-if="showImage && getImage(item)" class="card-image" :style="imageStyle">
+            <img :src="getImage(item)" :alt="getTitle(item)" />
+          </div>
+
+          <!-- 卡片内容 -->
+          <div class="card-content">
+            <!-- 标题 -->
+            <div v-if="showTitle" class="card-title" :style="titleStyle">
+              {{ getTitle(item) }}
+            </div>
+
+            <!-- 描述 -->
+            <div v-if="showDescription" class="card-description" :style="descriptionStyle">
+              {{ getDescription(item) }}
+            </div>
+
+            <!-- 标签 -->
+            <div v-if="showTags && getTags(item).length > 0" class="card-tags">
+              <el-tag
+                v-for="(tag, tagIndex) in getTags(item)"
+                :key="tagIndex"
+                :type="getTagType(tagIndex)"
+                :size="tagSize"
+                :style="tagStyle"
+              >
+                {{ tag }}
+              </el-tag>
+            </div>
+
+            <!-- 底部信息 -->
+            <div v-if="showFooter" class="card-footer" :style="footerStyle">
+              {{ getFooter(item) }}
+            </div>
+          </div>
+        </el-card>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<style scoped>
+.card-grid-container {
+  box-sizing: border-box;
+}
+
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+
+.grid-wrapper {
+  width: 100%;
+}
+
+.grid-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 4px;
+  margin-right: -6px;
+}
+</style>