@vela-studio/ui 1.0.1

package/src/components/controls/multiSelect/MultiSelect.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="multi-select-container" :style="containerStyle">
+    <el-select
+      v-model="internalValue"
+      multiple
+      :placeholder="placeholder"
+      :clearable="clearable"
+      :filterable="filterable"
+      :disabled="disabled"
+      :size="size"
+      :collapse-tags="collapseTags"
+      :collapse-tags-tooltip="collapseTagsTooltip"
+      :max-collapse-tags="maxCollapseTags"
+      :multiple-limit="multipleLimit"
+      :style="selectStyle"
+      @change="handleChange"
+    >
+      <el-option
+        v-for="option in displayOptions"
+        :key="option.value"
+        :label="option.label"
+        :value="option.value"
+        :disabled="option.disabled"
+      />
+    </el-select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ElSelect, ElOption } from 'element-plus'
+
+// 选项接口
+export interface SelectOption {
+  label: string
+  value: string | number
+  disabled?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: (string | number)[]
+    options?: SelectOption[]
+    placeholder?: string
+    clearable?: boolean
+    filterable?: boolean
+    disabled?: boolean
+    size?: 'large' | 'default' | 'small'
+    collapseTags?: boolean
+    collapseTagsTooltip?: boolean
+    maxCollapseTags?: number
+    multipleLimit?: number
+    padding?: number
+    backgroundColor?: string
+    borderRadius?: number
+    opacity?: number
+    selectWidth?: number
+    borderColor?: string
+    focusBorderColor?: string
+    hoverBorderColor?: string
+    tagBackgroundColor?: string
+    tagTextColor?: string
+  }>(),
+  {
+    modelValue: () => [],
+    options: () => [],
+    placeholder: '请选择',
+    clearable: true,
+    filterable: false,
+    disabled: false,
+    size: 'default',
+    collapseTags: true,
+    collapseTagsTooltip: true,
+    maxCollapseTags: 2,
+    multipleLimit: 0,
+    padding: 8,
+    backgroundColor: 'transparent',
+    borderRadius: 4,
+    opacity: 100,
+    selectWidth: 100,
+    borderColor: '#dcdfe6',
+    focusBorderColor: '#409eff',
+    hoverBorderColor: '#c0c4cc',
+    tagBackgroundColor: '#f0f2f5',
+    tagTextColor: '#606266',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: (string | number)[]]
+  change: [value: (string | number)[]]
+}>()
+
+// 默认选项
+const defaultOptions: SelectOption[] = [
+  { label: '选项 1', value: '1' },
+  { label: '选项 2', value: '2' },
+  { label: '选项 3', value: '3' },
+  { label: '选项 4', value: '4' },
+  { label: '选项 5', value: '5' },
+]
+
+// 显示的选项
+const displayOptions = computed(() => {
+  return props.options.length > 0 ? props.options : defaultOptions
+})
+
+// 内部值
+const internalValue = ref<(string | number)[]>([...props.modelValue])
+
+// 监听外部值变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    internalValue.value = [...newVal]
+  },
+)
+
+// 样式
+const containerStyle = computed<CSSProperties>(() => ({
+  opacity: props.opacity / 100,
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  height: '100%',
+  padding: `${props.padding}px`,
+  backgroundColor: props.backgroundColor,
+  borderRadius: `${props.borderRadius}px`,
+}))
+
+const selectStyle = computed<CSSProperties>(
+  () =>
+    ({
+      width: `${props.selectWidth}%`,
+      '--el-input-border-color': props.borderColor,
+      '--el-input-focus-border-color': props.focusBorderColor,
+      '--el-input-hover-border-color': props.hoverBorderColor,
+      '--el-tag-bg-color': props.tagBackgroundColor,
+      '--el-tag-text-color': props.tagTextColor,
+    }) as CSSProperties,
+)
+
+// 事件
+function handleChange(value: (string | number)[]) {
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+</script>
+
+<style scoped>
+.multi-select-container {
+  box-sizing: border-box;
+}
+</style>

package/src/components/controls/navButton/NavButton.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="nav-button" :style="containerStyle" @click="handleClick">
+    <el-icon v-if="icon" class="nav-icon" :size="iconSize">
+      <component :is="iconComponent" />
+    </el-icon>
+    <span v-if="showLabel" class="nav-label">{{ label }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import * as Icons from '@element-plus/icons-vue'
+import { ElIcon } from 'element-plus'
+
+export interface NavButtonProps {
+  label?: string
+  showLabel?: boolean
+  icon?: string
+  iconSize?: number
+  backgroundColor?: string
+  color?: string
+  borderRadius?: number
+  paddingX?: number
+  paddingY?: number
+  fontSize?: number
+  shadow?: boolean
+}
+
+const props = withDefaults(defineProps<NavButtonProps>(), {
+  label: '跳转',
+  showLabel: true,
+  icon: 'ArrowRight',
+  iconSize: 20,
+  backgroundColor: '#409eff',
+  color: '#ffffff',
+  borderRadius: 8,
+  paddingX: 24,
+  paddingY: 12,
+  fontSize: 14,
+  shadow: false,
+})
+
+const emit = defineEmits<{
+  click: []
+}>()
+
+// 图标组件
+const iconComponent = computed(() => {
+  const name = props.icon
+  return (Icons as Record<string, unknown>)[name] || Icons.ArrowRight
+})
+
+// 样式
+const containerStyle = computed<CSSProperties>(() => ({
+  backgroundColor: props.backgroundColor,
+  color: props.color,
+  borderRadius: `${props.borderRadius}px`,
+  padding: `${props.paddingY}px ${props.paddingX}px`,
+  fontSize: `${props.fontSize}px`,
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: '8px',
+  transition: 'all 0.2s ease',
+  boxShadow: props.shadow ? '0 2px 8px rgba(0,0,0,0.15)' : 'none',
+}))
+
+function handleClick() {
+  emit('click')
+}
+</script>
+
+<style scoped>
+.nav-button {
+  user-select: none;
+  font-weight: 500;
+}
+
+.nav-button:hover {
+  filter: brightness(1.1);
+  transform: translateY(-1px);
+}
+
+.nav-button:active {
+  transform: translateY(0);
+  filter: brightness(0.95);
+}
+
+.nav-icon {
+  flex-shrink: 0;
+}
+
+.nav-label {
+  white-space: nowrap;
+}
+</style>

package/src/components/controls/pagination/Pagination.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="pagination-container" :style="containerStyle">
+    <el-pagination
+      v-model:current-page="internalPage"
+      v-model:page-size="internalSize"
+      :page-sizes="pageSizes"
+      :layout="layout"
+      :total="total"
+      :background="background"
+      :small="small"
+      @current-change="handlePageChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ElPagination } from 'element-plus'
+
+export interface PaginationProps {
+  currentPage?: number
+  pageSize?: number
+  total?: number
+  pageSizes?: number[]
+  layout?: string
+  background?: boolean
+  small?: boolean
+  backgroundColor?: string
+}
+
+const props = withDefaults(defineProps<PaginationProps>(), {
+  currentPage: 1,
+  pageSize: 10,
+  total: 100,
+  pageSizes: () => [10, 20, 50, 100],
+  layout: 'prev, pager, next, sizes, total',
+  background: true,
+  small: false,
+  backgroundColor: 'transparent',
+})
+
+const emit = defineEmits<{
+  'update:currentPage': [page: number]
+  'update:pageSize': [size: number]
+  pageChange: [page: number]
+  sizeChange: [size: number]
+}>()
+
+const internalPage = ref(props.currentPage)
+const internalSize = ref(props.pageSize)
+
+// 监听外部 props 变化
+watch(
+  () => props.currentPage,
+  (val) => {
+    internalPage.value = val
+  },
+)
+
+watch(
+  () => props.pageSize,
+  (val) => {
+    internalSize.value = val
+  },
+)
+
+const containerStyle = computed<CSSProperties>(() => ({
+  '--el-pagination-bg-color': props.backgroundColor,
+}))
+
+function handlePageChange(page: number) {
+  emit('update:currentPage', page)
+  emit('pageChange', page)
+}
+
+function handleSizeChange(size: number) {
+  emit('update:pageSize', size)
+  emit('sizeChange', size)
+}
+</script>
+
+<style scoped>
+.pagination-container {
+  display: flex;
+  justify-content: center;
+  padding: 8px;
+}
+
+:deep(.el-pagination) {
+  justify-content: center;
+}
+</style>

package/src/components/controls/searchBox/SearchBox.vue

@@ -0,0 +1,170 @@
+<template>
+  <div :style="containerStyle">
+    <el-input
+      v-model="internalValue"
+      :placeholder="placeholder"
+      :size="size"
+      :clearable="clearable"
+      :disabled="disabled"
+      :prefix-icon="prefixIcon"
+      :suffix-icon="suffixIcon"
+      :maxlength="maxlength"
+      :show-word-limit="showWordLimit"
+      :style="inputStyle"
+      @input="handleInput"
+      @change="handleChange"
+      @clear="handleClear"
+      @focus="handleFocus"
+      @blur="handleBlur"
+    >
+      <template v-if="showSearchButton" #append>
+        <el-button :icon="SearchIcon" :type="buttonType" @click="handleSearch">
+          {{ buttonText }}
+        </el-button>
+      </template>
+    </el-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { CSSProperties, Component } from 'vue'
+import { Search as SearchIcon } from '@element-plus/icons-vue'
+import { ElInput, ElButton } from 'element-plus'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    placeholder?: string
+    size?: 'large' | 'default' | 'small'
+    clearable?: boolean
+    disabled?: boolean
+    prefixIcon?: string | Component
+    suffixIcon?: string | Component
+    maxlength?: number
+    showWordLimit?: boolean
+    showSearchButton?: boolean
+    buttonText?: string
+    buttonType?: 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger'
+    padding?: number
+    backgroundColor?: string
+    borderColor?: string
+    borderFocusColor?: string
+    borderHoverColor?: string
+    textColor?: string
+    placeholderColor?: string
+    fontSize?: number
+    inputWidth?: string
+  }>(),
+  {
+    modelValue: '',
+    placeholder: '请输入搜索内容',
+    size: 'default',
+    clearable: true,
+    disabled: false,
+    prefixIcon: undefined,
+    suffixIcon: undefined,
+    maxlength: undefined,
+    showWordLimit: false,
+    showSearchButton: true,
+    buttonText: '搜索',
+    buttonType: 'primary',
+    padding: 16,
+    backgroundColor: 'transparent',
+    borderColor: '#dcdfe6',
+    borderFocusColor: '#409eff',
+    borderHoverColor: '#c0c4cc',
+    textColor: '#606266',
+    placeholderColor: '#a8abb2',
+    fontSize: 14,
+    inputWidth: '100%',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  input: [value: string]
+  change: [value: string]
+  clear: []
+  search: [value: string]
+  focus: []
+  blur: []
+}>()
+
+// 内部值
+const internalValue = ref(props.modelValue)
+
+// 监听外部值变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    internalValue.value = newVal
+  },
+)
+
+// 样式
+const containerStyle = computed<CSSProperties>(() => ({
+  padding: `${props.padding}px`,
+  backgroundColor: props.backgroundColor,
+}))
+
+const inputStyle = computed<CSSProperties>(
+  () =>
+    ({
+      width: props.inputWidth,
+      fontSize: `${props.fontSize}px`,
+      '--el-input-border-color': props.borderColor,
+      '--el-input-focus-border-color': props.borderFocusColor,
+      '--el-input-hover-border-color': props.borderHoverColor,
+      '--el-input-text-color': props.textColor,
+      '--el-input-placeholder-color': props.placeholderColor,
+    }) as CSSProperties,
+)
+
+// 事件处理
+const handleInput = (value: string) => {
+  emit('update:modelValue', value)
+  emit('input', value)
+}
+
+const handleChange = (value: string) => {
+  emit('change', value)
+}
+
+const handleClear = () => {
+  emit('clear')
+}
+
+const handleSearch = () => {
+  emit('search', internalValue.value)
+}
+
+const handleFocus = () => {
+  emit('focus')
+}
+
+const handleBlur = () => {
+  emit('blur')
+}
+</script>
+
+<style scoped>
+.el-input {
+  width: v-bind('inputStyle.width');
+  font-size: v-bind('inputStyle.fontSize');
+}
+
+:deep(.el-input__wrapper) {
+  --el-input-border-color: v-bind('inputStyle["--el-input-border-color"]');
+  --el-input-focus-border-color: v-bind('inputStyle["--el-input-focus-border-color"]');
+  --el-input-hover-border-color: v-bind('inputStyle["--el-input-hover-border-color"]');
+}
+
+:deep(.el-input__inner) {
+  color: v-bind('inputStyle["--el-input-text-color"]');
+}
+
+:deep(.el-input__inner::placeholder) {
+  color: v-bind('inputStyle["--el-input-placeholder-color"]');
+}
+</style>

package/src/components/controls/select/Select.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="select-container" :style="containerStyle">
+    <el-select
+      v-model="internalValue"
+      :placeholder="placeholder"
+      :clearable="clearable"
+      :filterable="filterable"
+      :disabled="disabled"
+      :size="size"
+      :style="selectStyle"
+      @change="handleChange"
+    >
+      <el-option
+        v-for="option in displayOptions"
+        :key="option.value"
+        :label="option.label"
+        :value="option.value"
+        :disabled="option.disabled"
+      />
+    </el-select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ElSelect, ElOption } from 'element-plus'
+
+// 选项接口
+export interface SelectOption {
+  label: string
+  value: string | number
+  disabled?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number
+    options?: SelectOption[]
+    placeholder?: string
+    clearable?: boolean
+    filterable?: boolean
+    disabled?: boolean
+    size?: 'large' | 'default' | 'small'
+    padding?: number
+    backgroundColor?: string
+    borderRadius?: number
+    opacity?: number
+    selectWidth?: number
+    borderColor?: string
+    focusBorderColor?: string
+    hoverBorderColor?: string
+  }>(),
+  {
+    modelValue: '',
+    options: () => [],
+    placeholder: '请选择',
+    clearable: true,
+    filterable: false,
+    disabled: false,
+    size: 'default',
+    padding: 8,
+    backgroundColor: 'transparent',
+    borderRadius: 4,
+    opacity: 100,
+    selectWidth: 100,
+    borderColor: '#dcdfe6',
+    focusBorderColor: '#409eff',
+    hoverBorderColor: '#c0c4cc',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+  change: [value: string | number]
+}>()
+
+// 默认选项
+const defaultOptions: SelectOption[] = [
+  { label: '选项 1', value: '1' },
+  { label: '选项 2', value: '2' },
+  { label: '选项 3', value: '3' },
+]
+
+// 显示的选项
+const displayOptions = computed(() => {
+  return props.options.length > 0 ? props.options : defaultOptions
+})
+
+// 内部值
+const internalValue = ref<string | number>(props.modelValue)
+
+// 监听外部值变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    internalValue.value = newVal
+  },
+)
+
+// 样式
+const containerStyle = computed<CSSProperties>(() => ({
+  opacity: props.opacity / 100,
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  height: '100%',
+  padding: `${props.padding}px`,
+  backgroundColor: props.backgroundColor,
+  borderRadius: `${props.borderRadius}px`,
+}))
+
+const selectStyle = computed<CSSProperties>(
+  () =>
+    ({
+      width: `${props.selectWidth}%`,
+      '--el-input-border-color': props.borderColor,
+      '--el-input-focus-border-color': props.focusBorderColor,
+      '--el-input-hover-border-color': props.hoverBorderColor,
+    }) as CSSProperties,
+)
+
+// 事件
+function handleChange(value: string | number) {
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+</script>
+
+<style scoped>
+.select-container {
+  box-sizing: border-box;
+}
+</style>