foucui 1.0.1

package/components/QiuSlider/index.vue

@@ -0,0 +1,266 @@
+<template>
+  <div
+    class="qiu-slider"
+    :class="{
+      'is-disabled': disabled,
+    }"
+  >
+    <div
+      ref="trackRef"
+      class="qiu-slider__runway"
+      @mousedown="onTrackClick"
+    >
+      <div class="qiu-slider__bar" :style="{ width: `${percent}%` }" />
+      <div
+        ref="thumbRef"
+        class="qiu-slider__button-wrapper"
+        :style="{ left: `${percent}%` }"
+        tabindex="0"
+        role="slider"
+        :aria-valuemin="min"
+        :aria-valuemax="max"
+        :aria-valuenow="currentValue"
+        :aria-disabled="disabled"
+        @mousedown.stop="startDrag"
+        @keydown.left.prevent="stepValue(-step)"
+        @keydown.right.prevent="stepValue(step)"
+        @keydown.down.prevent="stepValue(-step)"
+        @keydown.up.prevent="stepValue(step)"
+        @mouseenter="showTip = showTooltip"
+        @mouseleave="showTip = false"
+      >
+        <div class="qiu-slider__button" />
+        <Transition name="qiu-slider-tip">
+          <div v-if="showTip && showTooltip" class="qiu-slider__tooltip">
+            {{ currentValue }}
+          </div>
+        </Transition>
+      </div>
+    </div>
+    <input
+      type="range"
+      class="qiu-slider__native"
+      :min="min"
+      :max="max"
+      :step="step"
+      :value="currentValue"
+      :disabled="disabled"
+      tabindex="-1"
+      @input="onNativeInput"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuSlider' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number
+    min?: number
+    max?: number
+    step?: number
+    disabled?: boolean
+    showTooltip?: boolean
+  }>(),
+  {
+    modelValue: 0,
+    min: 0,
+    max: 100,
+    step: 1,
+    disabled: false,
+    showTooltip: true,
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [number]
+  change: [number]
+  input: [number]
+}>()
+
+const trackRef = ref<HTMLElement | null>(null)
+const thumbRef = ref<HTMLElement | null>(null)
+const dragging = ref(false)
+const showTip = ref(false)
+
+const currentValue = computed(() => {
+  const v = props.modelValue ?? props.min
+  return Math.min(props.max, Math.max(props.min, v))
+})
+
+const percent = computed(() => {
+  const range = props.max - props.min
+  if (range <= 0) return 0
+  return ((currentValue.value - props.min) / range) * 100
+})
+
+const setValue = (val: number, emitChange = true) => {
+  const clamped = Math.min(props.max, Math.max(props.min, val))
+  const stepped = Math.round((clamped - props.min) / props.step) * props.step + props.min
+  const final = Number(stepped.toFixed(10))
+  emit('update:modelValue', final)
+  emit('input', final)
+  if (emitChange) emit('change', final)
+}
+
+const valueFromClientX = (clientX: number) => {
+  const track = trackRef.value
+  if (!track) return currentValue.value
+  const rect = track.getBoundingClientRect()
+  const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width))
+  return props.min + ratio * (props.max - props.min)
+}
+
+const onTrackClick = (e: MouseEvent) => {
+  if (props.disabled) return
+  setValue(valueFromClientX(e.clientX))
+}
+
+const startDrag = () => {
+  if (props.disabled) return
+  dragging.value = true
+  showTip.value = props.showTooltip
+
+  const onMove = (e: MouseEvent) => {
+    if (!dragging.value) return
+    setValue(valueFromClientX(e.clientX), false)
+  }
+
+  const onUp = (e: MouseEvent) => {
+    dragging.value = false
+    showTip.value = false
+    setValue(valueFromClientX(e.clientX))
+    document.removeEventListener('mousemove', onMove)
+    document.removeEventListener('mouseup', onUp)
+  }
+
+  document.addEventListener('mousemove', onMove)
+  document.addEventListener('mouseup', onUp)
+}
+
+const stepValue = (delta: number) => {
+  if (props.disabled) return
+  setValue(currentValue.value + delta)
+}
+
+const onNativeInput = (e: Event) => {
+  setValue(Number((e.target as HTMLInputElement).value), false)
+}
+</script>
+
+<style lang="scss" scoped>
+.qiu-slider {
+  /* 左右预留半个手柄宽度，避免 0%/100% 时被父级 overflow 裁切 */
+  --qiu-slider-thumb-size: 20px;
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 32px;
+  padding: 0 calc(var(--qiu-slider-thumb-size) / 2);
+  overflow: visible;
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+
+    .qiu-slider__button {
+      cursor: not-allowed;
+    }
+  }
+}
+
+.qiu-slider__runway {
+  position: relative;
+  flex: 1;
+  height: 6px;
+  margin: 0;
+  cursor: pointer;
+  background: var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
+  border-radius: 3px;
+  overflow: visible;
+}
+
+.qiu-slider__bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: var(--qiu-color-primary, var(--qiu-color-primary));
+  border-radius: 3px;
+  transition: width 0.1s ease;
+}
+
+.qiu-slider__button-wrapper {
+  position: absolute;
+  top: 50%;
+  z-index: 1;
+  outline: none;
+  transform: translate(-50%, -50%);
+}
+
+.qiu-slider__button {
+  box-sizing: border-box;
+  width: var(--qiu-slider-thumb-size);
+  height: var(--qiu-slider-thumb-size);
+  cursor: grab;
+  background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
+  border: 2px solid var(--qiu-color-primary, var(--qiu-color-primary));
+  border-radius: 50%;
+  transition: transform 0.15s ease;
+
+  &:hover,
+  .qiu-slider__button-wrapper:focus & {
+    transform: scale(1.1);
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.qiu-slider__tooltip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: #fff;
+  white-space: nowrap;
+  background: var(--qiu-color-primary, var(--qiu-color-primary));
+  border-radius: 4px;
+  transform: translateX(-50%);
+
+  &::after {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    content: '';
+    border: 4px solid transparent;
+    border-top-color: var(--qiu-color-primary, var(--qiu-color-primary));
+    transform: translateX(-50%);
+  }
+}
+
+.qiu-slider__native {
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.qiu-slider-tip-enter-active,
+.qiu-slider-tip-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.qiu-slider-tip-enter-from,
+.qiu-slider-tip-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(4px);
+}
+</style>

package/components/QiuSpace/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="qiu-space" :class="spaceClass" :style="spaceStyle">
+    <template v-for="(child, i) in slotChildren" :key="i">
+      <component :is="child" />
+      <span v-if="spacer && i < slotChildren.length - 1" class="qiu-space__spacer">{{ spacer }}</span>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Comment, Fragment, Text, useSlots, type VNode } from 'vue'
+
+defineOptions({ name: 'QiuSpace' })
+
+const SIZE_MAP: Record<string, number> = {
+  small: 8,
+  default: 12,
+  large: 16,
+}
+
+const props = withDefaults(
+  defineProps<{
+    size?: 'small' | 'default' | 'large' | number
+    direction?: 'horizontal' | 'vertical'
+    alignment?: 'start' | 'end' | 'center' | 'baseline' | 'stretch'
+    wrap?: boolean
+    spacer?: string
+  }>(),
+  {
+    size: 'small',
+    direction: 'horizontal',
+    alignment: 'center',
+    wrap: false,
+    spacer: '',
+  }
+)
+
+const slots = useSlots()
+
+const flattenNodes = (nodes: VNode[]): VNode[] => {
+  const result: VNode[] = []
+  for (const node of nodes) {
+    if (node.type === Comment) continue
+    if (node.type === Text && !String(node.children ?? '').trim()) continue
+    if (node.type === Fragment && Array.isArray(node.children)) {
+      result.push(...flattenNodes(node.children as VNode[]))
+    } else {
+      result.push(node)
+    }
+  }
+  return result
+}
+
+const slotChildren = computed(() => flattenNodes((slots.default?.() ?? []) as VNode[]))
+
+const gap = computed(() => {
+  if (typeof props.size === 'number') return `${props.size}px`
+  return `${SIZE_MAP[props.size] ?? SIZE_MAP.small}px`
+})
+
+const spaceClass = computed(() => ({
+  'qiu-space--vertical': props.direction === 'vertical',
+  'is-wrap': props.wrap,
+}))
+
+const alignMap: Record<string, string> = {
+  start: 'flex-start',
+  end: 'flex-end',
+  center: 'center',
+  baseline: 'baseline',
+  stretch: 'stretch',
+}
+
+const spaceStyle = computed(() => ({
+  gap: gap.value,
+  flexDirection: props.direction === 'vertical' ? 'column' : 'row',
+  alignItems: alignMap[props.alignment] || 'center',
+  flexWrap: props.wrap ? 'wrap' : 'nowrap',
+}))
+</script>
+
+<style lang="scss" scoped>
+.qiu-space {
+  display: inline-flex;
+
+  &.is-wrap {
+    flex-wrap: wrap;
+  }
+}
+
+.qiu-space__spacer {
+  color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
+  user-select: none;
+}
+</style>

package/components/QiuSparkline/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <span class="qiu-sparkline" :style="{ width: `${width}px`, height: `${height}px` }">
+    <svg :viewBox="`0 0 ${width} ${height}`" class="qiu-sparkline__svg" preserveAspectRatio="none">
+      <defs>
+        <linearGradient :id="gradId" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" :stop-color="color" stop-opacity="0.32" />
+          <stop offset="100%" :stop-color="color" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+      <path v-if="areaPath" :d="areaPath" :fill="`url(#${gradId})`" />
+      <path :d="linePath" :stroke="color" :stroke-width="strokeWidth" fill="none" stroke-linejoin="round" stroke-linecap="round" />
+    </svg>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+defineOptions({ name: 'QiuSparkline' })
+
+const props = withDefaults(
+  defineProps<{
+    data?: number[]
+    width?: number
+    height?: number
+    color?: string
+    /** 是否填充面积 */
+    fill?: boolean
+    strokeWidth?: number
+  }>(),
+  {
+    data: () => [],
+    width: 120,
+    height: 36,
+    color: 'var(--qiu-color-primary, #409eff)',
+    fill: true,
+    strokeWidth: 1.5,
+  }
+)
+
+const gradId = `qiu-spark-${Math.random().toString(36).slice(2, 9)}`
+
+const bounds = computed(() => {
+  const arr = props.data
+  if (!arr.length) return { min: 0, max: 1 }
+  const min = Math.min(...arr)
+  const max = Math.max(...arr)
+  return { min, max: max === min ? min + 1 : max }
+})
+
+const points = computed(() => {
+  const arr = props.data
+  const n = arr.length
+  if (!n) return []
+  const { min, max } = bounds.value
+  const pad = props.strokeWidth + 1
+  const w = props.width
+  const h = props.height
+  const innerH = h - pad * 2
+  return arr.map((v, i) => {
+    const x = n === 1 ? w / 2 : (i / (n - 1)) * w
+    const y = pad + innerH - ((v - min) / (max - min)) * innerH
+    return { x, y }
+  })
+})
+
+const linePath = computed(() =>
+  points.value.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(' ')
+)
+
+const areaPath = computed(() => {
+  if (!props.fill || !points.value.length) return ''
+  const first = points.value[0]
+  const last = points.value[points.value.length - 1]
+  const h = props.height
+  return `${linePath.value} L${last.x.toFixed(2)},${h} L${first.x.toFixed(2)},${h} Z`
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-sparkline {
+  display: inline-flex;
+  vertical-align: middle;
+
+  &__svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+}
+</style>

package/components/QiuStatistic/index.vue

@@ -0,0 +1,4 @@
+<script lang="ts">
+import QiuStatistic from '../QiuStatistics/index.vue'
+export default QiuStatistic
+</script>

package/components/QiuStatistics/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="qiu-statistic">
+    <div v-if="title || $slots.title" class="qiu-statistic__title">
+      <slot name="title">{{ title }}</slot>
+    </div>
+    <div class="qiu-statistic__content" :style="valueStyle">
+      <span v-if="prefix || $slots.prefix" class="qiu-statistic__prefix">
+        <slot name="prefix">{{ prefix }}</slot>
+      </span>
+      <span class="qiu-statistic__value">{{ displayValue }}</span>
+      <span v-if="suffix || $slots.suffix" class="qiu-statistic__suffix">
+        <slot name="suffix">{{ suffix }}</slot>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuStatistic' })
+
+const props = withDefaults(
+  defineProps<{
+    value?: number | string | Date
+    title?: string
+    precision?: number
+    prefix?: string
+    suffix?: string
+    valueStyle?: Record<string, string> | string
+    countdown?: boolean
+  }>(),
+  {
+    value: 0,
+    title: '',
+    precision: 0,
+    prefix: '',
+    suffix: '',
+    valueStyle: () => ({}),
+    countdown: false,
+  }
+)
+
+const now = ref(Date.now())
+let timer: ReturnType<typeof setInterval> | null = null
+
+const targetMs = computed(() => {
+  const v = props.value
+  if (v instanceof Date) return v.getTime()
+  if (typeof v === 'number') return v
+  const parsed = Date.parse(String(v))
+  return Number.isNaN(parsed) ? Date.now() : parsed
+})
+
+const formatCountdown = (ms: number) => {
+  const total = Math.max(0, Math.floor(ms / 1000))
+  const h = Math.floor(total / 3600)
+  const m = Math.floor((total % 3600) / 60)
+  const s = total % 60
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${pad(h)}:${pad(m)}:${pad(s)}`
+}
+
+const formatNumber = (val: number | string) => {
+  const num = typeof val === 'number' ? val : Number(val)
+  if (Number.isNaN(num)) return String(val)
+  if (props.precision >= 0) return num.toFixed(props.precision)
+  return String(num)
+}
+
+const displayValue = computed(() => {
+  if (props.countdown) {
+    return formatCountdown(targetMs.value - now.value)
+  }
+  return formatNumber(props.value as number | string)
+})
+
+const startTick = () => {
+  stopTick()
+  if (!props.countdown) return
+  now.value = Date.now()
+  timer = setInterval(() => {
+    now.value = Date.now()
+  }, 1000)
+}
+
+const stopTick = () => {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+}
+
+watch(() => props.countdown, startTick, { immediate: true })
+onBeforeUnmount(stopTick)
+</script>
+
+<style lang="scss" scoped>
+.qiu-statistic {
+  display: inline-block;
+
+  &__title {
+    margin-bottom: 8px;
+    font-size: 14px;
+    color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
+  }
+
+  &__content {
+    display: inline-flex;
+    gap: 4px;
+    align-items: baseline;
+    font-size: 28px;
+    font-weight: 600;
+    line-height: 1.2;
+    color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
+  }
+
+  &__prefix,
+  &__suffix {
+    font-size: 16px;
+    font-weight: 400;
+    color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
+  }
+}
+</style>