foucui 1.0.1

package/components/QiuDigitalCard/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="qiu-digital-card" :class="[`qiu-digital-card--${theme}`]">
+    <div v-if="icon || $slots.icon" class="qiu-digital-card__icon">
+      <slot name="icon"><qiu-icon :icon="icon!" /></slot>
+    </div>
+    <div class="qiu-digital-card__content">
+      <div class="qiu-digital-card__value">
+        <span v-if="prefix" class="qiu-digital-card__affix">{{ prefix }}</span>
+        <span class="qiu-digital-card__num">{{ display }}</span>
+        <span v-if="suffix" class="qiu-digital-card__affix">{{ suffix }}</span>
+      </div>
+      <div v-if="title || $slots.title" class="qiu-digital-card__title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+      <div v-if="$slots.footer" class="qiu-digital-card__footer">
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue'
+
+defineOptions({ name: 'QiuDigitalCard' })
+
+const props = withDefaults(
+  defineProps<{
+    value?: number
+    title?: string
+    prefix?: string
+    suffix?: string
+    icon?: string
+    /** 保留小数位 */
+    precision?: number
+    /** 千分位分隔 */
+    groupSeparator?: boolean
+    /** 是否开启动画滚动 */
+    animated?: boolean
+    duration?: number
+    theme?: 'light' | 'dark'
+  }>(),
+  {
+    value: 0,
+    title: '',
+    prefix: '',
+    suffix: '',
+    icon: '',
+    precision: 0,
+    groupSeparator: true,
+    animated: true,
+    duration: 800,
+    theme: 'light',
+  }
+)
+
+const current = ref(0)
+
+const display = computed(() => {
+  const n = Number(current.value.toFixed(props.precision))
+  const fixed = n.toFixed(props.precision)
+  if (!props.groupSeparator) return fixed
+  const [int, dec] = fixed.split('.')
+  const grouped = int.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  return dec ? `${grouped}.${dec}` : grouped
+})
+
+const animateTo = (to: number) => {
+  if (!props.animated) {
+    current.value = to
+    return
+  }
+  const from = current.value
+  const start = performance.now()
+  const step = (now: number) => {
+    const t = Math.min(1, (now - start) / props.duration)
+    const eased = 1 - Math.pow(1 - t, 3)
+    current.value = from + (to - from) * eased
+    if (t < 1) requestAnimationFrame(step)
+    else current.value = to
+  }
+  requestAnimationFrame(step)
+}
+
+watch(
+  () => props.value,
+  (v) => animateTo(Number(v) || 0),
+  { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+.qiu-digital-card {
+  display: inline-flex;
+  gap: 14px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 16px 18px;
+  background: var(--qiu-bg-color, #fff);
+  border: 1px solid var(--qiu-border-color-lighter, #ebeef5);
+  border-radius: 8px;
+
+  &--dark {
+    background: var(--qiu-color-primary, #409eff);
+    border-color: transparent;
+    color: #fff;
+
+    .qiu-digital-card__title {
+      color: rgba(255, 255, 255, 0.85);
+    }
+  }
+}
+
+.qiu-digital-card__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  font-size: 20px;
+  color: var(--qiu-color-primary, #409eff);
+  background: color-mix(in srgb, var(--qiu-color-primary, #409eff) 12%, transparent);
+  border-radius: 10px;
+
+  .qiu-digital-card--dark & {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.18);
+  }
+}
+
+.qiu-digital-card__value {
+  display: flex;
+  align-items: baseline;
+  font-size: 26px;
+  font-weight: 700;
+  line-height: 1.1;
+  color: var(--qiu-text-color-primary, #303133);
+
+  .qiu-digital-card--dark & {
+    color: #fff;
+  }
+}
+
+.qiu-digital-card__affix {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.qiu-digital-card__title {
+  margin-top: 4px;
+  font-size: 13px;
+  color: var(--qiu-text-color-secondary, #909399);
+}
+
+.qiu-digital-card__footer {
+  margin-top: 6px;
+  font-size: 12px;
+}
+</style>

package/components/QiuDivider/index.vue

@@ -0,0 +1,185 @@
+<template>
+  <blockquote
+    v-if="blockquote"
+    class="qiu-blockquote"
+    :class="isBorder ? `qiu-blockquote-${type} is-border` : `qiu-blockquote-${type}`"
+  >
+    <slot />
+  </blockquote>
+  <fieldset v-else-if="fieldset" class="qiu-fieldset">
+    <legend>{{ title }}</legend>
+    <slot />
+  </fieldset>
+  <div
+    v-else
+    class="qiu-divider"
+    :class="[
+      `qiu-divider--${direction}`,
+      `qiu-divider--${contentPosition}`,
+      `qiu-divider--${borderStyle}`,
+    ]"
+    role="separator"
+  >
+    <span v-if="$slots.default" class="qiu-divider__text">
+      <slot />
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'QiuDivider',
+})
+
+defineProps({
+  direction: {
+    type: String as () => 'horizontal' | 'vertical',
+    default: 'horizontal',
+  },
+  contentPosition: {
+    type: String as () => 'left' | 'center' | 'right',
+    default: 'center',
+  },
+  borderStyle: {
+    type: String as () => 'solid' | 'dashed' | 'dotted',
+    default: 'solid',
+  },
+  blockquote: {
+    type: Boolean,
+    default: false,
+  },
+  fieldset: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: 'primary',
+  },
+  isBorder: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-blockquote {
+  width: 100%;
+  padding: 15px;
+  margin: 0 0 10px 0;
+  line-height: 1.8;
+  background-color: var(--qiu-background-color);
+  border-left: 5px solid var(--qiu-color-primary);
+  border-radius: 0 var(--qiu-border-radius-base) var(--qiu-border-radius-base) 0;
+
+  &-primary {
+    border-left: 5px solid var(--qiu-color-primary);
+  }
+
+  &-success {
+    border-left: 5px solid var(--qiu-color-success);
+  }
+
+  &-warning {
+    border-left: 5px solid var(--qiu-color-warning);
+  }
+
+  &-danger {
+    border-left: 5px solid var(--qiu-color-danger);
+  }
+
+  &-info {
+    border-left: 5px solid var(--qiu-color-info);
+  }
+
+  &.is-border {
+    border-top: 1px solid var(--qiu-border-color);
+    border-right: 1px solid var(--qiu-border-color);
+    border-bottom: 1px solid var(--qiu-border-color);
+  }
+}
+
+.qiu-fieldset {
+  padding: var(--qiu-padding);
+  margin-bottom: 10px;
+  border: 1px solid var(--qiu-border-color);
+
+  legend {
+    padding: 0 var(--qiu-padding) 0 var(--qiu-padding);
+  }
+}
+
+.qiu-divider {
+  position: relative;
+  display: block;
+  margin: 16px 0;
+  border-color: var(--qiu-border-color, #dcdfe6);
+
+  &--horizontal {
+    width: 100%;
+    height: 0;
+    border-top-width: 1px;
+
+    &.qiu-divider--solid {
+      border-top-style: solid;
+    }
+
+    &.qiu-divider--dashed {
+      border-top-style: dashed;
+    }
+
+    &.qiu-divider--dotted {
+      border-top-style: dotted;
+    }
+
+    .qiu-divider__text {
+      position: absolute;
+      top: 50%;
+      padding: 0 12px;
+      font-size: 14px;
+      color: var(--qiu-text-color-primary, #303133);
+      background: var(--qiu-bg-color, #fff);
+      transform: translateY(-50%);
+    }
+
+    &.qiu-divider--left .qiu-divider__text {
+      left: 20px;
+    }
+
+    &.qiu-divider--center .qiu-divider__text {
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &.qiu-divider--right .qiu-divider__text {
+      right: 20px;
+    }
+  }
+
+  &--vertical {
+    display: inline-block;
+    width: 0;
+    height: 1em;
+    margin: 0 8px;
+    vertical-align: middle;
+    border-left-width: 1px;
+
+    &.qiu-divider--solid {
+      border-left-style: solid;
+    }
+
+    &.qiu-divider--dashed {
+      border-left-style: dashed;
+    }
+
+    &.qiu-divider--dotted {
+      border-left-style: dotted;
+    }
+  }
+}
+</style>

package/components/QiuDot/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <span :class="'qiu-dot qiu-dot-' + type"></span>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'QiuDot',
+})
+
+defineProps({
+  type: {
+    values: ['primary', 'success', 'warning', 'danger'],
+    type: String,
+    default: 'primary',
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+/**
+  * qiu-dot：菜单角标圆点
+  * 注意：过大的 scale 脉冲在侧栏 overflow 裁剪下，Windows/Chrome 易留下「细沙状」残影
+  */
+.qiu-dot {
+  position: relative;
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-right: 3px;
+  vertical-align: middle;
+  border-radius: 50%;
+  /* 限制绘制范围，避免切换菜单时脉冲层残留 */
+  overflow: visible;
+  contain: layout style;
+  isolation: isolate;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+
+  @keyframes qiuDot {
+    0% {
+      opacity: 0.55;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(1.65);
+    }
+  }
+
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    content: '';
+    border-radius: 50%;
+    /* 用 opacity 为主、缩小放大幅度，减少合成层残影 */
+    animation: qiuDot 1.4s ease-out infinite;
+    will-change: opacity, transform;
+    backface-visibility: hidden;
+  }
+
+  @mixin set-color($color) {
+    &-#{$color} {
+      background: var(--qiu-color-#{$color});
+
+      &::after {
+        background: var(--qiu-color-#{$color});
+      }
+    }
+  }
+
+  @include set-color(primary);
+  @include set-color(success);
+  @include set-color(warning);
+  @include set-color(error);
+  @include set-color(danger);
+}
+</style>