@vela-studio/ui 1.0.1

package/src/components/content/markdown/Markdown.vue

@@ -0,0 +1,174 @@
+<template>
+  <div :style="containerStyle" class="markdown-body" v-html="renderedHtml"></div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { marked } from 'marked'
+import DOMPurify from 'dompurify'
+
+const props = withDefaults(
+  defineProps<{
+    content?: string
+    padding?: number
+    backgroundColor?: string
+    textColor?: string
+    fontSize?: number
+    lineHeight?: number | string
+    borderRadius?: number
+    border?: string
+    fontFamily?: string
+  }>(),
+  {
+    content: '# Markdown 内容\n\n请输入 Markdown 文本...',
+    padding: 16,
+    backgroundColor: '#ffffff',
+    textColor: '#333333',
+    fontSize: 14,
+    lineHeight: 1.6,
+    borderRadius: 0,
+    border: 'none',
+    fontFamily: 'inherit',
+  },
+)
+
+// 渲染的 HTML
+const renderedHtml = computed(() => {
+  try {
+    const html = marked(props.content)
+    // 使用 DOMPurify 清理 HTML,防止 XSS 攻击
+    return DOMPurify.sanitize(String(html))
+  } catch (error) {
+    console.error('Markdown 渲染失败:', error)
+    return '<p>Markdown 渲染失败</p>'
+  }
+})
+
+// 样式
+const containerStyle = computed<CSSProperties>(() => ({
+  width: '100%',
+  height: '100%',
+  padding: `${props.padding}px`,
+  backgroundColor: props.backgroundColor,
+  color: props.textColor,
+  fontSize: `${props.fontSize}px`,
+  lineHeight: String(props.lineHeight),
+  borderRadius: `${props.borderRadius}px`,
+  border: props.border,
+  overflow: 'auto',
+  fontFamily: props.fontFamily,
+}))
+</script>
+
+<style scoped>
+.markdown-body {
+  box-sizing: border-box;
+}
+
+.markdown-body :deep(h1),
+.markdown-body :deep(h2),
+.markdown-body :deep(h3),
+.markdown-body :deep(h4),
+.markdown-body :deep(h5),
+.markdown-body :deep(h6) {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.markdown-body :deep(h1) {
+  font-size: 2em;
+  border-bottom: 1px solid #eaecef;
+  padding-bottom: 0.3em;
+}
+
+.markdown-body :deep(h2) {
+  font-size: 1.5em;
+  border-bottom: 1px solid #eaecef;
+  padding-bottom: 0.3em;
+}
+
+.markdown-body :deep(h3) {
+  font-size: 1.25em;
+}
+
+.markdown-body :deep(p) {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.markdown-body :deep(ul),
+.markdown-body :deep(ol) {
+  padding-left: 2em;
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.markdown-body :deep(li) {
+  margin-bottom: 4px;
+}
+
+.markdown-body :deep(code) {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: rgba(175, 184, 193, 0.2);
+  border-radius: 6px;
+  font-family: monospace;
+}
+
+.markdown-body :deep(pre) {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: #f6f8fa;
+  border-radius: 6px;
+  margin-bottom: 16px;
+}
+
+.markdown-body :deep(pre code) {
+  background-color: transparent;
+  padding: 0;
+}
+
+.markdown-body :deep(blockquote) {
+  padding: 0 1em;
+  color: #6a737d;
+  border-left: 0.25em solid #dfe2e5;
+  margin: 0 0 16px 0;
+}
+
+.markdown-body :deep(table) {
+  border-collapse: collapse;
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.markdown-body :deep(table th),
+.markdown-body :deep(table td) {
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+}
+
+.markdown-body :deep(table th) {
+  font-weight: 600;
+  background-color: #f6f8fa;
+}
+
+.markdown-body :deep(img) {
+  max-width: 100%;
+  box-sizing: content-box;
+}
+
+.markdown-body :deep(a) {
+  color: #0366d6;
+  text-decoration: none;
+}
+
+.markdown-body :deep(a:hover) {
+  text-decoration: underline;
+}
+</style>

package/src/components/controls/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,79 @@
+<template>
+  <el-breadcrumb :separator="separator" class="custom-breadcrumb" :style="containerStyle">
+    <el-breadcrumb-item v-for="(item, index) in displayItems" :key="index">
+      <span v-if="index === displayItems.length - 1" class="current">{{ item.label }}</span>
+      <a v-else class="link" @click="handleItemClick(item)">{{ item.label }}</a>
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
+
+export interface BreadcrumbItem {
+  label: string
+  pageId?: string
+  url?: string
+}
+
+export interface BreadcrumbProps {
+  items?: BreadcrumbItem[]
+  separator?: string
+  fontSize?: number
+  color?: string
+  activeColor?: string
+  linkColor?: string
+}
+
+const props = withDefaults(defineProps<BreadcrumbProps>(), {
+  items: () => [],
+  separator: '/',
+  fontSize: 14,
+  color: '#606266',
+  activeColor: '#909399',
+  linkColor: '#409eff',
+})
+
+const emit = defineEmits<{
+  itemClick: [item: BreadcrumbItem]
+}>()
+
+// 默认显示项
+const defaultItems: BreadcrumbItem[] = [{ label: '首页', pageId: 'home' }, { label: '当前页面' }]
+
+const displayItems = computed(() => {
+  return props.items.length > 0 ? props.items : defaultItems
+})
+
+const containerStyle = computed<CSSProperties>(() => ({
+  fontSize: `${props.fontSize}px`,
+  '--breadcrumb-color': props.color,
+  '--breadcrumb-active-color': props.activeColor,
+  '--breadcrumb-link-color': props.linkColor,
+}))
+
+function handleItemClick(item: BreadcrumbItem) {
+  emit('itemClick', item)
+}
+</script>
+
+<style scoped>
+.custom-breadcrumb {
+  padding: 8px 16px;
+}
+
+.link {
+  cursor: pointer;
+  color: var(--breadcrumb-link-color, #409eff);
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.current {
+  color: var(--breadcrumb-active-color, #909399);
+}
+</style>

package/src/components/controls/buttonGroup/ButtonGroup.vue

@@ -0,0 +1,93 @@
+<template>
+  <div :style="containerStyle">
+    <el-button-group>
+      <el-button
+        v-for="button in displayButtons"
+        :key="button.value"
+        :type="button.type || type"
+        :size="size"
+        :disabled="button.disabled || disabled"
+        :plain="plain"
+        :round="round"
+        :circle="circle"
+        :icon="button.icon"
+        @click="handleClick(button)"
+      >
+        {{ button.label }}
+      </el-button>
+    </el-button-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ElButtonGroup, ElButton } from 'element-plus'
+
+// 按钮接口
+export interface ButtonItem {
+  label: string
+  value: string | number
+  type?: 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger'
+  icon?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    buttons?: ButtonItem[]
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger'
+    size?: 'large' | 'default' | 'small'
+    disabled?: boolean
+    plain?: boolean
+    round?: boolean
+    circle?: boolean
+    padding?: number
+    backgroundColor?: string
+  }>(),
+  {
+    buttons: () => [],
+    type: 'default',
+    size: 'default',
+    disabled: false,
+    plain: false,
+    round: false,
+    circle: false,
+    padding: 16,
+    backgroundColor: 'transparent',
+  },
+)
+
+const emit = defineEmits<{
+  click: [button: ButtonItem]
+}>()
+
+// 默认按钮数据
+const defaultButtons: ButtonItem[] = [
+  { label: '按钮 1', value: '1' },
+  { label: '按钮 2', value: '2' },
+  { label: '按钮 3', value: '3' },
+]
+
+// 显示的按钮
+const displayButtons = computed(() => {
+  return props.buttons.length > 0 ? props.buttons : defaultButtons
+})
+
+// 容器样式
+const containerStyle = computed<CSSProperties>(() => ({
+  padding: `${props.padding}px`,
+  backgroundColor: props.backgroundColor,
+}))
+
+// 事件处理
+const handleClick = (button: ButtonItem) => {
+  emit('click', button)
+}
+</script>
+
+<style scoped>
+:deep(.el-button-group) {
+  display: flex;
+}
+</style>

package/src/components/controls/checkboxGroup/CheckboxGroup.vue

@@ -0,0 +1,147 @@
+<template>
+  <div :style="containerStyle">
+    <el-checkbox-group
+      v-model="internalValue"
+      :size="size"
+      :disabled="disabled"
+      :min="min"
+      :max="max"
+      @change="handleChange"
+    >
+      <component
+        :is="layout === 'button' ? 'el-checkbox-button' : 'el-checkbox'"
+        v-for="option in displayOptions"
+        :key="option.value"
+        :label="option.value"
+        :disabled="option.disabled"
+        :border="showBorder && layout !== 'button'"
+      >
+        {{ option.label }}
+      </component>
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ElCheckboxGroup, ElCheckbox, ElCheckboxButton } from 'element-plus'
+
+// 选项接口
+export interface CheckboxOption {
+  label: string
+  value: string | number
+  disabled?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: (string | number)[]
+    options?: CheckboxOption[]
+    size?: 'large' | 'default' | 'small'
+    disabled?: boolean
+    min?: number
+    max?: number
+    layout?: 'default' | 'button'
+    showBorder?: boolean
+    direction?: 'horizontal' | 'vertical'
+    gap?: number
+    padding?: number
+    backgroundColor?: string
+    checkedColor?: string
+    borderColor?: string
+    textColor?: string
+  }>(),
+  {
+    modelValue: () => [],
+    options: () => [],
+    size: 'default',
+    disabled: false,
+    min: undefined,
+    max: undefined,
+    layout: 'default',
+    showBorder: false,
+    direction: 'horizontal',
+    gap: 12,
+    padding: 16,
+    backgroundColor: 'transparent',
+    checkedColor: '#409eff',
+    borderColor: '#dcdfe6',
+    textColor: '#606266',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: (string | number)[]]
+  change: [value: (string | number)[]]
+}>()
+
+// 默认选项
+const defaultOptions: CheckboxOption[] = [
+  { label: '选项 A', value: 'a' },
+  { label: '选项 B', value: 'b' },
+  { label: '选项 C', value: 'c' },
+]
+
+// 显示的选项
+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>(
+  () =>
+    ({
+      padding: `${props.padding}px`,
+      backgroundColor: props.backgroundColor,
+      display: 'flex',
+      flexDirection: props.direction === 'vertical' ? 'column' : 'row',
+      gap: `${props.gap}px`,
+      '--el-checkbox-checked-bg-color': props.checkedColor,
+      '--el-checkbox-checked-input-border-color': props.checkedColor,
+      '--el-checkbox-input-border-color': props.borderColor,
+      '--el-checkbox-text-color': props.textColor,
+    }) as CSSProperties,
+)
+
+// 事件处理
+const handleChange = (value: (string | number)[]) => {
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+</script>
+
+<style scoped>
+:deep(.el-checkbox-group) {
+  display: flex;
+  flex-direction: v-bind('containerStyle.flexDirection');
+  gap: v-bind('containerStyle.gap');
+}
+
+:deep(.el-checkbox) {
+  --el-checkbox-checked-bg-color: v-bind('containerStyle["--el-checkbox-checked-bg-color"]');
+  --el-checkbox-checked-input-border-color: v-bind(
+    'containerStyle["--el-checkbox-checked-input-border-color"]'
+  );
+  --el-checkbox-input-border-color: v-bind('containerStyle["--el-checkbox-input-border-color"]');
+  --el-checkbox-text-color: v-bind('containerStyle["--el-checkbox-text-color"]');
+}
+
+:deep(.el-checkbox-button) {
+  --el-checkbox-button-checked-bg-color: v-bind('containerStyle["--el-checkbox-checked-bg-color"]');
+  --el-checkbox-button-checked-border-color: v-bind(
+    'containerStyle["--el-checkbox-checked-input-border-color"]'
+  );
+}
+</style>

package/src/components/controls/dateRange/DateRange.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="date-range-container" :style="containerStyle">
+    <el-date-picker
+      v-model="internalValue"
+      type="daterange"
+      :range-separator="rangeSeparator"
+      :start-placeholder="startPlaceholder"
+      :end-placeholder="endPlaceholder"
+      :format="format"
+      :value-format="valueFormat"
+      :disabled="disabled"
+      :clearable="clearable"
+      :size="size"
+      :editable="editable"
+      :shortcuts="computedShortcuts"
+      :style="pickerStyle"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ElDatePicker } from 'element-plus'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: [Date, Date] | null
+    rangeSeparator?: string
+    startPlaceholder?: string
+    endPlaceholder?: string
+    format?: string
+    valueFormat?: string
+    disabled?: boolean
+    clearable?: boolean
+    size?: 'large' | 'default' | 'small'
+    editable?: boolean
+    enableShortcuts?: boolean
+    padding?: number
+    backgroundColor?: string
+    borderRadius?: number
+    opacity?: number
+    pickerWidth?: number
+    borderColor?: string
+    focusBorderColor?: string
+    hoverBorderColor?: string
+  }>(),
+  {
+    modelValue: null,
+    rangeSeparator: '至',
+    startPlaceholder: '开始日期',
+    endPlaceholder: '结束日期',
+    format: 'YYYY-MM-DD',
+    valueFormat: 'YYYY-MM-DD',
+    disabled: false,
+    clearable: true,
+    size: 'default',
+    editable: false,
+    enableShortcuts: true,
+    padding: 8,
+    backgroundColor: 'transparent',
+    borderRadius: 4,
+    opacity: 100,
+    pickerWidth: 100,
+    borderColor: '#dcdfe6',
+    focusBorderColor: '#409eff',
+    hoverBorderColor: '#c0c4cc',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: [Date, Date] | null]
+  change: [value: [Date, Date] | null]
+}>()
+
+// 内部值
+const internalValue = ref<[Date, Date] | null>(props.modelValue)
+
+// 监听外部值变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    internalValue.value = newVal
+  },
+)
+
+// 快捷选项
+const computedShortcuts = computed(() => {
+  if (!props.enableShortcuts) return []
+
+  return [
+    {
+      text: '最近一周',
+      value: () => {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+        return [start, end]
+      },
+    },
+    {
+      text: '最近一个月',
+      value: () => {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+        return [start, end]
+      },
+    },
+    {
+      text: '最近三个月',
+      value: () => {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+        return [start, end]
+      },
+    },
+    {
+      text: '本月',
+      value: () => {
+        const now = new Date()
+        const start = new Date(now.getFullYear(), now.getMonth(), 1)
+        const end = new Date(now.getFullYear(), now.getMonth() + 1, 0)
+        return [start, end]
+      },
+    },
+    {
+      text: '本年',
+      value: () => {
+        const now = new Date()
+        const start = new Date(now.getFullYear(), 0, 1)
+        const end = new Date(now.getFullYear(), 11, 31)
+        return [start, end]
+      },
+    },
+  ]
+})
+
+// 样式
+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 pickerStyle = computed<CSSProperties>(
+  () =>
+    ({
+      width: `${props.pickerWidth}%`,
+      '--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: [Date, Date] | null) {
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+</script>
+
+<style scoped>
+.date-range-container {
+  box-sizing: border-box;
+}
+</style>