@vela-studio/ui 1.0.1

package/src/components/layout/flex/Flex.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="v-flex-container" :style="containerStyle">
+    <slot>
+      <div class="v-flex-placeholder" :style="placeholderStyle">
+        {{ placeholder }}
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+
+// 定义纯 UI Props
+const props = withDefaults(
+  defineProps<{
+    // Flex 布局属性
+    flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse'
+    justifyContent?:
+      | 'flex-start'
+      | 'flex-end'
+      | 'center'
+      | 'space-between'
+      | 'space-around'
+      | 'space-evenly'
+    alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
+    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse'
+    gap?: number
+
+    // 容器样式
+    padding?: number
+    backgroundColor?: string
+    borderRadius?: number
+    borderWidth?: number
+    borderColor?: string
+    minHeight?: string
+
+    // 占位文本
+    placeholder?: string
+    textColor?: string
+    fontSize?: number
+  }>(),
+  {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'stretch',
+    flexWrap: 'nowrap',
+    gap: 0,
+    padding: 16,
+    backgroundColor: 'transparent',
+    borderRadius: 0,
+    borderWidth: 0,
+    borderColor: '#dcdfe6',
+    minHeight: '100px',
+    placeholder: 'Flex Container',
+    textColor: '#909399',
+    fontSize: 14,
+  },
+)
+
+// 容器样式
+const containerStyle = computed<CSSProperties>(() => {
+  return {
+    display: 'flex',
+    flexDirection: props.flexDirection,
+    justifyContent: props.justifyContent,
+    alignItems: props.alignItems,
+    flexWrap: props.flexWrap,
+    gap: `${props.gap}px`,
+    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,
+    width: '100%',
+    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-flex-container {
+  box-sizing: border-box;
+}
+
+.v-flex-placeholder {
+  width: 100%;
+}
+</style>

package/src/components/layout/grid/Grid.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="v-grid-container" :style="containerStyle">
+    <slot>
+      <template v-if="placeholderItems.length">
+        <div v-for="(item, idx) in placeholderItems" :key="idx" class="v-grid-placeholder-item">
+          {{ item }}
+        </div>
+      </template>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+
+// 定义纯 UI Props
+const props = withDefaults(
+  defineProps<{
+    // Grid 布局属性
+    gridTemplateColumns?: string
+    gridTemplateRows?: string
+    gridGap?: number
+    gridAutoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense'
+
+    // 容器样式
+    padding?: number
+    backgroundColor?: string
+    border?: string
+    borderRadius?: number
+    minHeight?: number
+    textColor?: string
+
+    // 占位内容
+    content?: string
+    placeholderItems?: string[]
+  }>(),
+  {
+    gridTemplateColumns: 'repeat(3, 1fr)',
+    gridTemplateRows: 'auto',
+    gridGap: 16,
+    gridAutoFlow: 'row',
+    padding: 16,
+    backgroundColor: '#ffffff',
+    border: '1px solid #e5e7eb',
+    borderRadius: 4,
+    minHeight: 200,
+    textColor: '#333333',
+    placeholderItems: () => ['Grid 1', 'Grid 2', 'Grid 3'],
+  },
+)
+
+// 容器样式
+const containerStyle = computed<CSSProperties>(() => {
+  return {
+    display: 'grid',
+    gridTemplateColumns: props.gridTemplateColumns,
+    gridTemplateRows: props.gridTemplateRows,
+    gap: `${props.gridGap}px`,
+    gridAutoFlow: props.gridAutoFlow,
+    padding: `${props.padding}px`,
+    backgroundColor: props.backgroundColor,
+    border: props.border,
+    borderRadius: `${props.borderRadius}px`,
+    minHeight: `${props.minHeight}px`,
+    color: props.textColor,
+    boxSizing: 'border-box',
+  }
+})
+
+// 占位项
+const placeholderItems = computed(() => {
+  return props.placeholderItems
+})
+</script>
+
+<style scoped>
+.v-grid-container {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.v-grid-placeholder-item {
+  padding: 12px;
+  background-color: #f3f4f6;
+  border-radius: 4px;
+  text-align: center;
+}
+</style>

package/src/components/layout/modal/Modal.vue

@@ -0,0 +1,118 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="title"
+    :width="width"
+    :fullscreen="fullscreen"
+    :close-on-click-modal="closeOnClickModal"
+    :show-close="showClose"
+    :append-to-body="true"
+    @close="handleClose"
+  >
+    <div class="v-modal-body" :style="bodyStyle">
+      <slot>
+        <span v-if="content">{{ content }}</span>
+      </slot>
+    </div>
+    <template #footer v-if="showFooter">
+      <slot name="footer">
+        <span class="v-modal-footer">
+          <el-button @click="handleCancel">{{ cancelText }}</el-button>
+          <el-button type="primary" @click="handleConfirm">{{ confirmText }}</el-button>
+        </span>
+      </slot>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ElDialog, ElButton } from 'element-plus'
+
+// 定义纯 UI Props
+const props = defineProps<{
+  // Dialog 配置
+  visible?: boolean
+  title?: string
+  width?: string | number
+  fullscreen?: boolean
+  closeOnClickModal?: boolean
+  showClose?: boolean
+  showFooter?: boolean
+
+  // 内容
+  content?: string
+
+  // 按钮文本
+  cancelText?: string
+  confirmText?: string
+
+  // 样式
+  backgroundColor?: string
+  textColor?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'close'): void
+  (e: 'cancel'): void
+  (e: 'confirm'): void
+}>()
+
+// 对话框可见性
+const dialogVisible = ref(props.visible ?? false)
+
+// 监听外部 visible 变化
+watch(
+  () => props.visible,
+  (newVal) => {
+    dialogVisible.value = newVal ?? false
+  },
+)
+
+// 同步内部状态到外部
+watch(
+  () => dialogVisible.value,
+  (newVal) => {
+    emit('update:visible', newVal)
+  },
+)
+
+// 关闭处理
+const handleClose = () => {
+  dialogVisible.value = false
+  emit('close')
+}
+
+// 取消处理
+const handleCancel = () => {
+  dialogVisible.value = false
+  emit('cancel')
+}
+
+// 确认处理
+const handleConfirm = () => {
+  emit('confirm')
+}
+
+// 内容样式
+const bodyStyle = computed<CSSProperties>(() => {
+  return {
+    backgroundColor: props.backgroundColor ?? '#ffffff',
+    color: props.textColor ?? '#333333',
+  }
+})
+</script>
+
+<style scoped>
+.v-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.v-modal-body {
+  box-sizing: border-box;
+}
+</style>

package/src/components/layout/panel/Panel.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="v-panel" :style="containerStyle">
+    <!-- 头部 -->
+    <div v-if="showHeader" class="v-panel-header" :style="headerStyle" @click="handleHeaderClick">
+      <span>{{ title }}</span>
+      <span v-if="collapsible" class="v-panel-collapse-icon">
+        {{ isCollapsed ? '▼' : '▲' }}
+      </span>
+    </div>
+
+    <!-- 内容 -->
+    <div class="v-panel-body" :style="bodyStyle">
+      <slot>
+        <span v-if="content">{{ content }}</span>
+      </slot>
+    </div>
+
+    <!-- 底部 -->
+    <div v-if="showFooter && footerContent" class="v-panel-footer" :style="footerStyle">
+      {{ footerContent }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'
+
+// 定义纯 UI Props
+const props = defineProps<{
+  // 内容
+  title?: string
+  content?: string
+  footerContent?: string
+
+  // 功能配置
+  showHeader?: boolean
+  showFooter?: boolean
+  collapsible?: boolean
+  collapsed?: boolean
+
+  // 容器样式
+  backgroundColor?: string
+  border?: string
+  borderRadius?: number
+  boxShadow?: string
+
+  // 头部样式
+  headerPadding?: number
+  headerBg?: string
+  headerFontSize?: number
+  headerColor?: string
+
+  // 内容样式
+  bodyPadding?: number
+  textColor?: string
+  fontSize?: number
+
+  // 底部样式
+  footerPadding?: number
+  footerBg?: string
+  footerFontSize?: number
+  footerColor?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:collapsed', value: boolean): void
+  (e: 'toggle', value: boolean): void
+}>()
+
+// 折叠状态
+const isCollapsed = ref(props.collapsed ?? false)
+
+// 监听外部 collapsed 变化
+watch(
+  () => props.collapsed,
+  (newVal) => {
+    isCollapsed.value = newVal ?? false
+  },
+)
+
+// 切换折叠
+const handleHeaderClick = () => {
+  if (props.collapsible) {
+    isCollapsed.value = !isCollapsed.value
+    emit('update:collapsed', isCollapsed.value)
+    emit('toggle', isCollapsed.value)
+  }
+}
+
+// 容器样式
+const containerStyle = computed<CSSProperties>(() => {
+  return {
+    backgroundColor: props.backgroundColor ?? '#ffffff',
+    border: props.border ?? '1px solid #e5e7eb',
+    borderRadius: `${props.borderRadius ?? 4}px`,
+    overflow: 'hidden',
+    boxShadow: props.boxShadow ?? '0 1px 3px rgba(0, 0, 0, 0.1)',
+    boxSizing: 'border-box',
+  }
+})
+
+// 头部样式
+const headerStyle = computed<CSSProperties>(() => {
+  return {
+    padding: `${props.headerPadding ?? 16}px`,
+    backgroundColor: props.headerBg ?? '#f9fafb',
+    borderBottom: '1px solid #e5e7eb',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    cursor: props.collapsible ? 'pointer' : 'default',
+    fontWeight: 600,
+    fontSize: `${props.headerFontSize ?? 14}px`,
+    color: props.headerColor ?? '#111827',
+  }
+})
+
+// 内容样式
+const bodyStyle = computed<CSSProperties>(() => {
+  return {
+    padding: `${props.bodyPadding ?? 16}px`,
+    color: props.textColor ?? '#333333',
+    fontSize: `${props.fontSize ?? 14}px`,
+    display: isCollapsed.value ? 'none' : 'block',
+  }
+})
+
+// 底部样式
+const footerStyle = computed<CSSProperties>(() => {
+  return {
+    padding: `${props.footerPadding ?? 16}px`,
+    backgroundColor: props.footerBg ?? '#f9fafb',
+    borderTop: '1px solid #e5e7eb',
+    fontSize: `${props.footerFontSize ?? 12}px`,
+    color: props.footerColor ?? '#6b7280',
+  }
+})
+</script>
+
+<style scoped>
+.v-panel {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.v-panel-header {
+  user-select: none;
+}
+
+.v-panel-collapse-icon {
+  font-size: 12px;
+}
+
+.v-panel-body {
+  box-sizing: border-box;
+}
+
+.v-panel-footer {
+  box-sizing: border-box;
+}
+</style>

package/src/components/layout/row/Row.vue

@@ -0,0 +1,99 @@
+<template>
+  <el-row
+    :gutter="gutter"
+    :justify="justify"
+    :align="align"
+    :tag="tag"
+    :style="containerStyle"
+    class="v-row"
+  >
+    <slot>
+      <div class="v-row-placeholder" :style="placeholderStyle">
+        {{ placeholder }}
+      </div>
+    </slot>
+  </el-row>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ElRow } from 'element-plus'
+
+// 定义纯 UI Props
+const props = withDefaults(
+  defineProps<{
+    // Row 布局属性
+    gutter?: number
+    justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'
+    align?: 'top' | 'middle' | 'bottom'
+    tag?: string
+
+    // 容器样式
+    padding?: number
+    backgroundColor?: string
+    borderRadius?: number
+    borderWidth?: number
+    borderColor?: string
+    minHeight?: string
+
+    // 占位文本
+    placeholder?: string
+    textColor?: string
+    fontSize?: number
+  }>(),
+  {
+    gutter: 0,
+    justify: 'start',
+    align: 'top',
+    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-row {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.v-row-placeholder {
+  width: 100%;
+}
+</style>

package/src/components/layout/tabs/Tabs.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="v-tabs-container" :style="containerStyle">
+    <el-tabs
+      v-model="activeTabValue"
+      :type="type"
+      :tab-position="tabPosition"
+      :closable="closable"
+      :addable="addable"
+      @tab-change="handleTabChange"
+    >
+      <el-tab-pane
+        v-for="(tab, idx) in tabs"
+        :key="tab.name"
+        :label="tab.label"
+        :name="String(tab.name)"
+      >
+        <!-- 使用具名插槽，允许外部自定义每个 tab 的内容 -->
+        <slot :name="`tab-${idx}`" :tab="tab">
+          {{ tab.content }}
+        </slot>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ElTabs, ElTabPane } from 'element-plus'
+
+// Tab 项类型
+interface TabItem {
+  label: string
+  name: string
+  content?: string
+}
+
+// 定义纯 UI Props
+const props = defineProps<{
+  // Tabs 数据
+  tabs?: TabItem[]
+  activeTab?: string
+
+  // Tabs 配置
+  type?: '' | 'card' | 'border-card'
+  tabPosition?: 'top' | 'right' | 'bottom' | 'left'
+  closable?: boolean
+  addable?: boolean
+
+  // 容器样式
+  backgroundColor?: string
+  padding?: number
+  textColor?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:activeTab', value: string): void
+  (e: 'tab-change', value: string): void
+}>()
+
+// 当前激活的 tab
+const activeTabValue = ref(props.activeTab ?? '')
+
+// 监听外部 activeTab 变化
+watch(
+  () => props.activeTab,
+  (newVal) => {
+    if (newVal) activeTabValue.value = newVal
+  },
+)
+
+// 初始化 activeTab
+watch(
+  () => props.tabs,
+  (newTabs) => {
+    if (newTabs?.length && !activeTabValue.value) {
+      activeTabValue.value = String(newTabs[0]?.name ?? '')
+    }
+  },
+  { immediate: true },
+)
+
+// Tab 切换处理
+const handleTabChange = (tabName: string) => {
+  emit('update:activeTab', tabName)
+  emit('tab-change', tabName)
+}
+
+// 容器样式
+const containerStyle = computed<CSSProperties>(() => {
+  return {
+    backgroundColor: props.backgroundColor ?? '#ffffff',
+    padding: `${props.padding ?? 0}px`,
+    color: props.textColor ?? '#333333',
+    boxSizing: 'border-box',
+    width: '100%',
+  }
+})
+
+// 默认 tabs
+const tabs = computed<TabItem[]>(() => {
+  return (
+    props.tabs ?? [
+      { label: 'Tab 1', name: 'tab1', content: 'Content of Tab 1' },
+      { label: 'Tab 2', name: 'tab2', content: 'Content of Tab 2' },
+      { label: 'Tab 3', name: 'tab3', content: 'Content of Tab 3' },
+    ]
+  )
+})
+</script>
+
+<style scoped>
+.v-tabs-container {
+  box-sizing: border-box;
+  width: 100%;
+}
+</style>