@vela-studio/ui 1.0.1

package/src/components/data/list/List.vue

@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { Document, ArrowRight } from '@element-plus/icons-vue'
+import { ElScrollbar, ElEmpty, ElIcon } from 'element-plus'
+
+export interface ListItem {
+  title?: string
+  description?: string
+  extra?: string
+  [key: string]: unknown
+}
+
+const props = withDefaults(
+  defineProps<{
+    // 数据
+    data?: ListItem[]
+    // 字段映射
+    titleField?: string
+    descriptionField?: string
+    extraField?: string
+    // 配置
+    showIcon?: boolean
+    showTitle?: boolean
+    showDescription?: boolean
+    showExtra?: boolean
+    showAction?: boolean
+    showBorder?: boolean
+    showSplit?: boolean
+    emptyText?: string
+    iconSize?: number
+    scrollHeight?: string
+    // 样式
+    opacity?: number
+    visible?: boolean
+    backgroundColor?: string
+    borderRadius?: number
+    itemPadding?: number
+    itemPaddingX?: number
+    itemBackgroundColor?: string
+    splitColor?: string
+    borderColor?: string
+    iconColor?: string
+    titleFontSize?: number
+    titleColor?: string
+    titleFontWeight?: string
+    descriptionFontSize?: number
+    descriptionColor?: string
+    extraFontSize?: number
+    extraColor?: string
+  }>(),
+  {
+    data: () => [],
+    titleField: 'title',
+    descriptionField: 'description',
+    extraField: 'extra',
+    showIcon: false,
+    showTitle: true,
+    showDescription: true,
+    showExtra: false,
+    showAction: true,
+    showBorder: true,
+    showSplit: true,
+    emptyText: '暂无数据',
+    iconSize: 20,
+    scrollHeight: '100%',
+    opacity: 100,
+    visible: true,
+    backgroundColor: '#ffffff',
+    borderRadius: 4,
+    itemPadding: 12,
+    itemPaddingX: 16,
+    itemBackgroundColor: '#ffffff',
+    splitColor: '#e4e7ed',
+    borderColor: 'transparent',
+    iconColor: '#909399',
+    titleFontSize: 15,
+    titleColor: '#303133',
+    titleFontWeight: '500',
+    descriptionFontSize: 13,
+    descriptionColor: '#909399',
+    extraFontSize: 12,
+    extraColor: '#409eff',
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'item-click', item: ListItem, index: number): void
+}>()
+
+// 默认数据
+const defaultData: ListItem[] = [
+  { title: '列表项 1', description: '这是列表项的描述信息', extra: '详情' },
+  { title: '列表项 2', description: '这是列表项的描述信息', extra: '详情' },
+  { title: '列表项 3', description: '这是列表项的描述信息', extra: '详情' },
+]
+
+const listData = computed(() => (props.data.length > 0 ? props.data : defaultData))
+
+const computedScrollHeight = computed(() => {
+  const height = props.scrollHeight
+  if (typeof height === 'number') return `${height}px`
+  if (typeof height === 'string' && (height.endsWith('px') || height.endsWith('%'))) return height
+  return '100%'
+})
+
+function getItemTitle(item: ListItem): string {
+  return String(item[props.titleField] ?? '')
+}
+
+function getItemDescription(item: ListItem): string {
+  return String(item[props.descriptionField] ?? '')
+}
+
+function getItemExtra(item: ListItem): string {
+  return String(item[props.extraField] ?? '')
+}
+
+function getIcon() {
+  return Document
+}
+
+// 样式
+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`,
+  overflow: 'hidden',
+}))
+
+const getItemStyle = (index: number): CSSProperties => ({
+  padding: `${props.itemPadding}px ${props.itemPaddingX}px`,
+  backgroundColor: props.itemBackgroundColor,
+  borderBottom:
+    props.showSplit && index < listData.value.length - 1 ? `1px solid ${props.splitColor}` : 'none',
+  borderLeft: props.showBorder ? `3px solid ${props.borderColor}` : 'none',
+  cursor: 'pointer',
+  transition: 'all 0.2s',
+})
+
+const iconStyle = computed<CSSProperties>(() => ({
+  color: props.iconColor,
+}))
+
+const titleStyle = computed<CSSProperties>(() => ({
+  fontSize: `${props.titleFontSize}px`,
+  color: props.titleColor,
+  fontWeight: props.titleFontWeight,
+  marginBottom: props.showDescription ? '4px' : '0',
+}))
+
+const descriptionStyle = computed<CSSProperties>(() => ({
+  fontSize: `${props.descriptionFontSize}px`,
+  color: props.descriptionColor,
+  lineHeight: 1.5,
+}))
+
+const extraStyle = computed<CSSProperties>(() => ({
+  fontSize: `${props.extraFontSize}px`,
+  color: props.extraColor,
+  marginTop: '4px',
+}))
+
+function handleItemClick(item: ListItem, index: number) {
+  emit('item-click', item, index)
+}
+</script>
+
+<template>
+  <div class="list-container" :style="containerStyle">
+    <el-scrollbar :height="computedScrollHeight">
+      <div v-if="listData.length === 0" class="empty-state">
+        <el-empty :description="emptyText" :image-size="80" />
+      </div>
+      <div v-else class="list-wrapper">
+        <div
+          v-for="(item, index) in listData"
+          :key="index"
+          class="list-item"
+          :style="getItemStyle(index)"
+          @click="handleItemClick(item, index)"
+        >
+          <!-- 带图标的列表项 -->
+          <div v-if="showIcon" class="item-icon" :style="iconStyle">
+            <el-icon :size="iconSize">
+              <component :is="getIcon()" />
+            </el-icon>
+          </div>
+
+          <!-- 内容区 -->
+          <div class="item-content">
+            <div v-if="showTitle" class="item-title" :style="titleStyle">
+              {{ getItemTitle(item) }}
+            </div>
+            <div v-if="showDescription" class="item-description" :style="descriptionStyle">
+              {{ getItemDescription(item) }}
+            </div>
+            <div v-if="showExtra" class="item-extra" :style="extraStyle">
+              {{ getItemExtra(item) }}
+            </div>
+          </div>
+
+          <!-- 右侧操作区 -->
+          <div v-if="showAction" class="item-action">
+            <el-icon>
+              <ArrowRight />
+            </el-icon>
+          </div>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<style scoped>
+.list-container {
+  box-sizing: border-box;
+}
+
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+
+.list-wrapper {
+  width: 100%;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  box-sizing: border-box;
+}
+
+.list-item:hover {
+  background-color: #f5f7fa !important;
+}
+
+.item-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.item-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.item-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.item-description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.item-extra {
+  margin-top: 4px;
+}
+
+.item-action {
+  flex-shrink: 0;
+  color: #c0c4cc;
+  display: flex;
+  align-items: center;
+}
+</style>

package/src/components/data/pivot/Pivot.vue

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import type { TableColumnCtx } from 'element-plus'
+import { ElTable, ElTableColumn, ElEmpty } from 'element-plus'
+
+export interface PivotColumn {
+  prop: string
+  label: string
+  width?: number
+  align?: string
+  sortable?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    // 数据
+    data?: Record<string, unknown>[]
+    // 配置
+    rowHeaders?: string[] | string
+    dataColumns?: PivotColumn[]
+    columnLabels?: Record<string, string>
+    stripe?: boolean
+    border?: boolean
+    size?: 'large' | 'default' | 'small'
+    showSummary?: boolean
+    emptyText?: string
+    height?: string
+    maxHeight?: string
+    rowHeaderWidth?: number
+    fixedRowHeaders?: boolean
+    rowHeaderAlign?: string
+    valueFormat?: 'number' | 'percent' | 'currency'
+    highlightThreshold?: number
+    // 样式
+    opacity?: number
+    visible?: boolean
+    backgroundColor?: string
+    borderRadius?: number
+    padding?: number
+    headerBackgroundColor?: string
+    headerColor?: string
+    hoverBackgroundColor?: string
+    borderColor?: string
+    highlightColor?: string
+  }>(),
+  {
+    data: () => [],
+    rowHeaders: () => ['category', 'region'],
+    dataColumns: () => [],
+    columnLabels: () => ({}),
+    stripe: true,
+    border: true,
+    size: 'default',
+    showSummary: true,
+    emptyText: '暂无数据',
+    height: 'auto',
+    maxHeight: '',
+    rowHeaderWidth: 120,
+    fixedRowHeaders: true,
+    rowHeaderAlign: 'left',
+    valueFormat: 'number',
+    highlightThreshold: 0,
+    opacity: 100,
+    visible: true,
+    backgroundColor: '#ffffff',
+    borderRadius: 4,
+    padding: 0,
+    headerBackgroundColor: '#f5f7fa',
+    headerColor: '#909399',
+    hoverBackgroundColor: '#f5f7fa',
+    borderColor: '#ebeef5',
+    highlightColor: '#67c23a',
+  },
+)
+
+// 默认数据
+const defaultData = [
+  { category: '产品A', region: '华东', q1: 1200, q2: 1500, q3: 1800, q4: 2100 },
+  { category: '产品A', region: '华南', q1: 1100, q2: 1300, q3: 1600, q4: 1900 },
+  { category: '产品B', region: '华东', q1: 900, q2: 1100, q3: 1300, q4: 1500 },
+  { category: '产品B', region: '华南', q1: 800, q2: 1000, q3: 1200, q4: 1400 },
+]
+
+const pivotData = computed(() => (props.data.length > 0 ? props.data : defaultData))
+
+const rowHeadersList = computed(() => {
+  if (Array.isArray(props.rowHeaders)) return props.rowHeaders
+  if (typeof props.rowHeaders === 'string') return props.rowHeaders.split(',').map((s) => s.trim())
+  return ['category', 'region']
+})
+
+const computedDataColumns = computed<PivotColumn[]>(() => {
+  if (props.dataColumns.length > 0) return props.dataColumns
+
+  // 从第一行数据推断列
+  if (pivotData.value.length > 0) {
+    const firstRow = pivotData.value[0]
+    if (!firstRow) return []
+    const cols: PivotColumn[] = []
+
+    Object.keys(firstRow).forEach((key) => {
+      if (!rowHeadersList.value.includes(key)) {
+        cols.push({
+          prop: key,
+          label: key.toUpperCase(),
+          width: 100,
+          align: 'center',
+          sortable: true,
+        })
+      }
+    })
+
+    return cols
+  }
+
+  return []
+})
+
+function getColumnLabel(prop: string): string {
+  return props.columnLabels[prop] || prop
+}
+
+function formatValue(value: unknown): string {
+  if (value === null || value === undefined) return '-'
+
+  const numValue = Number(value)
+  if (isNaN(numValue)) return String(value)
+
+  switch (props.valueFormat) {
+    case 'number':
+      return numValue.toLocaleString()
+    case 'percent':
+      return `${(numValue * 100).toFixed(2)}%`
+    case 'currency':
+      return `¥${numValue.toLocaleString()}`
+    default:
+      return String(value)
+  }
+}
+
+function getCellStyle(value: unknown): CSSProperties {
+  const numValue = Number(value)
+
+  if (!isNaN(numValue) && props.highlightThreshold > 0) {
+    if (numValue >= props.highlightThreshold) {
+      return {
+        color: props.highlightColor,
+        fontWeight: 'bold',
+      }
+    }
+  }
+
+  return {}
+}
+
+function getSummaries(param: {
+  columns: TableColumnCtx<Record<string, unknown>>[]
+  data: Record<string, unknown>[]
+}) {
+  const { columns, data } = param
+  const sums: string[] = []
+
+  columns.forEach((column, index) => {
+    if (index === 0) {
+      sums[index] = '合计'
+      return
+    }
+
+    if (rowHeadersList.value.includes(column.property)) {
+      sums[index] = ''
+      return
+    }
+
+    const values = data.map((item) => Number(item[column.property]))
+    if (values.every((value) => !isNaN(value))) {
+      const sum = values.reduce((prev, curr) => prev + curr, 0)
+      sums[index] = formatValue(sum)
+    } else {
+      sums[index] = '-'
+    }
+  })
+
+  return sums
+}
+
+// 样式
+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 tableStyle = computed<CSSProperties>(
+  () =>
+    ({
+      '--el-table-header-bg-color': props.headerBackgroundColor,
+      '--el-table-header-text-color': props.headerColor,
+      '--el-table-row-hover-bg-color': props.hoverBackgroundColor,
+      '--el-table-border-color': props.borderColor,
+    }) as CSSProperties,
+)
+</script>
+
+<template>
+  <div class="pivot-container" :style="containerStyle">
+    <div v-if="pivotData.length === 0" class="empty-state">
+      <el-empty :description="emptyText" :image-size="80" />
+    </div>
+    <el-table
+      v-else
+      :data="pivotData"
+      :stripe="stripe"
+      :border="border"
+      :size="size"
+      :show-summary="showSummary"
+      :summary-method="getSummaries"
+      :height="height === 'auto' ? undefined : height"
+      :max-height="maxHeight || undefined"
+      :style="tableStyle"
+    >
+      <!-- 行表头列 -->
+      <el-table-column
+        v-for="rowHeader in rowHeadersList"
+        :key="rowHeader"
+        :prop="rowHeader"
+        :label="getColumnLabel(rowHeader)"
+        :width="rowHeaderWidth"
+        :fixed="fixedRowHeaders"
+        :align="rowHeaderAlign"
+      />
+
+      <!-- 数据列 -->
+      <el-table-column
+        v-for="col in computedDataColumns"
+        :key="col.prop"
+        :prop="col.prop"
+        :label="col.label"
+        :width="col.width"
+        :align="col.align || 'center'"
+        :sortable="col.sortable"
+      >
+        <template #default="{ row }">
+          <span :style="getCellStyle(row[col.prop])">
+            {{ formatValue(row[col.prop]) }}
+          </span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<style scoped>
+.pivot-container {
+  box-sizing: border-box;
+}
+
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+</style>

package/src/components/data/table/Table.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ElTable, ElTableColumn } from 'element-plus'
+import type { TableColumn } from '@vela/core/types'
+
+const props = withDefaults(
+  defineProps<{
+    // 数据
+    data?: Record<string, unknown>[]
+    columns?: TableColumn[]
+    // 配置
+    stripe?: boolean
+    border?: boolean
+    size?: 'large' | 'default' | 'small'
+    autoHeight?: boolean
+    maxHeight?: number
+    highlightCurrentRow?: boolean
+    showHeader?: boolean
+    emptyText?: string
+    // 样式
+    opacity?: number
+    visible?: boolean
+    headerBackgroundColor?: string
+    headerTextColor?: string
+    headerFontSize?: number
+    headerFontWeight?: string
+    fontSize?: number
+    textColor?: string
+    rowBackgroundColor?: string
+  }>(),
+  {
+    data: () => [],
+    columns: () => [],
+    stripe: true,
+    border: true,
+    size: 'default',
+    autoHeight: false,
+    maxHeight: undefined,
+    highlightCurrentRow: true,
+    showHeader: true,
+    emptyText: '暂无数据',
+    opacity: 100,
+    visible: true,
+    headerBackgroundColor: '#f5f7fa',
+    headerTextColor: '#606266',
+    headerFontSize: 14,
+    headerFontWeight: 'bold',
+    fontSize: 14,
+    textColor: '#606266',
+    rowBackgroundColor: '#ffffff',
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'row-click', row: Record<string, unknown>): void
+}>()
+
+// 默认数据
+const defaultData = [
+  { name: '数据1', value: 100, status: '正常' },
+  { name: '数据2', value: 200, status: '正常' },
+  { name: '数据3', value: 150, status: '警告' },
+]
+
+const defaultColumns: TableColumn[] = [
+  { prop: 'name', label: '名称', align: 'left' },
+  { prop: 'value', label: '数值', align: 'right' },
+  { prop: 'status', label: '状态', align: 'center' },
+]
+
+const tableData = computed(() => (props.data.length > 0 ? props.data : defaultData))
+const tableColumns = computed(() => (props.columns.length > 0 ? props.columns : defaultColumns))
+
+// 样式
+const containerStyle = computed<CSSProperties>(() => ({
+  opacity: props.opacity / 100,
+  display: props.visible === false ? 'none' : 'block',
+  width: '100%',
+  height: '100%',
+}))
+
+const headerCellStyle = computed(() => ({
+  backgroundColor: props.headerBackgroundColor,
+  color: props.headerTextColor,
+  fontSize: `${props.headerFontSize}px`,
+  fontWeight: props.headerFontWeight,
+}))
+
+const cellStyle = computed(() => ({
+  fontSize: `${props.fontSize}px`,
+  color: props.textColor,
+}))
+
+const rowStyle = computed(() => ({
+  backgroundColor: props.rowBackgroundColor,
+}))
+
+function handleRowClick(row: Record<string, unknown>) {
+  emit('row-click', row)
+}
+</script>
+
+<template>
+  <div class="table-container" :style="containerStyle">
+    <el-table
+      :data="tableData"
+      :stripe="stripe"
+      :border="border"
+      :size="size"
+      :height="autoHeight ? undefined : '100%'"
+      :max-height="maxHeight"
+      :highlight-current-row="highlightCurrentRow"
+      :show-header="showHeader"
+      :empty-text="emptyText"
+      :header-cell-style="headerCellStyle"
+      :cell-style="cellStyle"
+      :row-style="rowStyle"
+      @row-click="handleRowClick"
+    >
+      <el-table-column
+        v-for="(col, index) in tableColumns"
+        :key="index"
+        :prop="col.prop"
+        :label="col.label"
+        :width="col.width"
+        :min-width="col.minWidth"
+        :align="col.align"
+        :sortable="col.sortable"
+        :fixed="col.fixed || undefined"
+      >
+        <template v-if="col.type === 'index'" #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<style scoped>
+.table-container {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+:deep(.el-table) {
+  width: 100%;
+  height: 100%;
+}
+</style>