foucui 1.0.1

package/components/QiuTimelineItem/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <li
+    class="qiu-timeline-item"
+    :class="[
+      `qiu-timeline-item--${resolvedType}`,
+      `qiu-timeline-item--placement-${placement}`,
+      { 'is-hollow': hollow },
+    ]"
+    :style="itemStyle"
+  >
+    <div class="qiu-timeline-item__tail" />
+    <div class="qiu-timeline-item__dot">
+      <slot name="dot">
+        <qiu-icon v-if="icon" :icon="icon" />
+      </slot>
+    </div>
+    <div class="qiu-timeline-item__wrapper">
+      <div
+        v-if="timestamp && placement === 'top'"
+        class="qiu-timeline-item__timestamp is-top"
+      >
+        {{ timestamp }}
+      </div>
+      <div class="qiu-timeline-item__content">
+        <slot />
+      </div>
+      <div
+        v-if="timestamp && placement === 'bottom'"
+        class="qiu-timeline-item__timestamp is-bottom"
+      >
+        {{ timestamp }}
+      </div>
+    </div>
+  </li>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuTimelineItem' })
+
+const props = withDefaults(
+  defineProps<{
+    timestamp?: string
+    placement?: 'top' | 'bottom'
+    type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+    color?: string
+    hollow?: boolean
+    icon?: string
+    center?: boolean
+  }>(),
+  {
+    timestamp: '',
+    placement: 'bottom',
+    type: 'primary',
+    color: '',
+    hollow: false,
+    icon: '',
+    center: false,
+  }
+)
+
+const typeColorMap: Record<string, string> = {
+  primary: 'var(--qiu-color-primary, var(--qiu-color-primary, #409eff))',
+  success: 'var(--qiu-color-success, var(--qiu-color-success, #67c23a))',
+  warning: 'var(--qiu-color-warning, var(--qiu-color-warning, #e6a23c))',
+  danger: 'var(--qiu-color-danger, var(--qiu-color-danger, #f56c6c))',
+  info: 'var(--qiu-color-info, var(--qiu-color-info, #909399))',
+}
+
+const resolvedType = computed(() => props.type || 'primary')
+
+const itemStyle = computed(() => ({
+  '--qiu-timeline-dot-color': props.color || typeColorMap[resolvedType.value],
+}))
+</script>
+
+<style lang="scss" scoped>
+.qiu-timeline-item {
+  position: relative;
+  padding-bottom: 20px;
+
+  &:last-child {
+    .qiu-timeline-item__tail {
+      display: none;
+    }
+  }
+
+  &__tail {
+    position: absolute;
+    top: 8px;
+    left: 4px;
+    width: 2px;
+    height: calc(100% - 8px);
+    background: var(--qiu-border-color-light, var(--qiu-border-color-light, #e4e7ed));
+  }
+
+  &__dot {
+    position: absolute;
+    top: 2px;
+    left: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 10px;
+    height: 10px;
+    font-size: 10px;
+    color: #fff;
+    background: var(--qiu-timeline-dot-color);
+    border: 2px solid var(--qiu-timeline-dot-color);
+    border-radius: 50%;
+  }
+
+  &.is-hollow &__dot {
+    background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
+    color: var(--qiu-timeline-dot-color);
+  }
+
+  &__wrapper {
+    position: relative;
+    padding-left: 24px;
+  }
+
+  &__timestamp {
+    margin-bottom: 6px;
+    font-size: 12px;
+    color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
+
+    &.is-bottom {
+      margin-top: 6px;
+      margin-bottom: 0;
+    }
+  }
+
+  &__content {
+    font-size: 14px;
+    line-height: 1.6;
+    color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
+  }
+}
+</style>

package/components/QiuTips/index.vue

@@ -0,0 +1,323 @@
+<template>
+  <span class="qiu-tips-host" v-bind="attrs">
+    <span
+      ref="triggerRef"
+      class="qiu-tips__trigger"
+      @mouseenter="onTriggerEnter"
+      @mouseleave="onTriggerLeave"
+      @click="onTriggerClick"
+    >
+      <slot />
+    </span>
+
+    <Teleport to="body">
+      <Transition name="qiu-tips-fade">
+        <div
+          v-show="visible"
+          ref="popperRef"
+          class="qiu-tips"
+          :class="[
+            `qiu-tips--${placement}`,
+            `qiu-tips--${type}`,
+            `qiu-tips--${effect}`,
+          ]"
+          :style="popperStyle"
+          role="tooltip"
+          @mouseenter="onPopperEnter"
+          @mouseleave="onTriggerLeave"
+        >
+          <div v-if="title || $slots.title" class="qiu-tips__title">
+            <slot name="title">{{ title }}</slot>
+          </div>
+          <div class="qiu-tips__content">
+            <slot name="content">{{ content }}</slot>
+          </div>
+          <i class="qiu-tips__arrow" aria-hidden="true" />
+        </div>
+      </Transition>
+    </Teleport>
+  </span>
+</template>
+
+<script lang="ts" setup>
+/**
+ * QiuTips — 带三角、主题色的提示气泡（比 QiuTooltip 更完整）
+ */
+defineOptions({ name: 'QiuTips', inheritAttrs: false })
+
+type Placement = 'top' | 'bottom' | 'left' | 'right'
+type TipsType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'cyan' | 'orange' | 'pink' | 'teal'
+
+const attrs = useAttrs()
+
+const props = withDefaults(
+  defineProps<{
+    content?: string
+    title?: string
+    placement?: Placement
+    type?: TipsType
+    effect?: 'light' | 'dark'
+    trigger?: 'hover' | 'click'
+    showAfter?: number
+    hideAfter?: number
+    disabled?: boolean
+  }>(),
+  {
+    content: '',
+    title: '',
+    placement: 'top',
+    type: 'primary',
+    effect: 'dark',
+    trigger: 'hover',
+    showAfter: 0,
+    hideAfter: 120,
+    disabled: false,
+  }
+)
+
+const triggerRef = ref<HTMLElement | null>(null)
+const popperRef = ref<HTMLElement | null>(null)
+const visible = ref(false)
+const popperStyle = ref<Record<string, string>>({})
+
+let showTimer: ReturnType<typeof setTimeout> | undefined
+let hideTimer: ReturnType<typeof setTimeout> | undefined
+let inPopper = false
+
+const updatePosition = () => {
+  const trigger = triggerRef.value
+  const popper = popperRef.value
+  if (!trigger || !popper) return
+
+  const rect = trigger.getBoundingClientRect()
+  const popRect = popper.getBoundingClientRect()
+  const gap = 10
+  let top = 0
+  let left = 0
+
+  switch (props.placement) {
+    case 'bottom':
+      top = rect.bottom + gap
+      left = rect.left + rect.width / 2 - popRect.width / 2
+      break
+    case 'left':
+      top = rect.top + rect.height / 2 - popRect.height / 2
+      left = rect.left - popRect.width - gap
+      break
+    case 'right':
+      top = rect.top + rect.height / 2 - popRect.height / 2
+      left = rect.right + gap
+      break
+    default:
+      top = rect.top - popRect.height - gap
+      left = rect.left + rect.width / 2 - popRect.width / 2
+  }
+
+  left = Math.min(Math.max(4, left), window.innerWidth - popRect.width - 4)
+  top = Math.min(Math.max(4, top), window.innerHeight - popRect.height - 4)
+
+  popperStyle.value = {
+    position: 'fixed',
+    top: `${Math.round(top)}px`,
+    left: `${Math.round(left)}px`,
+    zIndex: '4100',
+  }
+}
+
+const clearTimers = () => {
+  if (showTimer) clearTimeout(showTimer)
+  if (hideTimer) clearTimeout(hideTimer)
+  showTimer = undefined
+  hideTimer = undefined
+}
+
+const show = async () => {
+  if (props.disabled) return
+  clearTimers()
+  showTimer = setTimeout(async () => {
+    visible.value = true
+    await nextTick()
+    updatePosition()
+    requestAnimationFrame(() => updatePosition())
+  }, props.showAfter)
+}
+
+const hide = () => {
+  clearTimers()
+  hideTimer = setTimeout(() => {
+    if (!inPopper || props.trigger === 'click') visible.value = false
+    if (props.trigger === 'hover' && !inPopper) visible.value = false
+  }, props.hideAfter)
+}
+
+const onTriggerEnter = () => {
+  if (props.trigger !== 'hover') return
+  inPopper = false
+  show()
+}
+
+const onTriggerLeave = () => {
+  if (props.trigger === 'hover') {
+    inPopper = false
+    hide()
+  }
+}
+
+const onTriggerClick = () => {
+  if (props.trigger !== 'click' || props.disabled) return
+  if (visible.value) {
+    visible.value = false
+  } else {
+    show()
+  }
+}
+
+const onPopperEnter = () => {
+  if (props.trigger !== 'hover') return
+  inPopper = true
+  clearTimers()
+}
+
+const onDocClick = (e: MouseEvent) => {
+  if (props.trigger !== 'click' || !visible.value) return
+  const t = e.target as Node
+  if (triggerRef.value?.contains(t) || popperRef.value?.contains(t)) return
+  visible.value = false
+}
+
+const onScrollOrResize = () => {
+  if (visible.value) updatePosition()
+}
+
+watch(visible, (v) => {
+  if (v) {
+    window.addEventListener('scroll', onScrollOrResize, true)
+    window.addEventListener('resize', onScrollOrResize)
+    if (props.trigger === 'click') document.addEventListener('click', onDocClick, true)
+  } else {
+    window.removeEventListener('scroll', onScrollOrResize, true)
+    window.removeEventListener('resize', onScrollOrResize)
+    document.removeEventListener('click', onDocClick, true)
+  }
+})
+
+onBeforeUnmount(() => {
+  clearTimers()
+  window.removeEventListener('scroll', onScrollOrResize, true)
+  window.removeEventListener('resize', onScrollOrResize)
+  document.removeEventListener('click', onDocClick, true)
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-tips-host {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.qiu-tips__trigger {
+  display: inline-flex;
+  vertical-align: middle;
+  cursor: default;
+}
+
+.qiu-tips {
+  --qiu-tips-color: var(--qiu-color-primary, #0f766e);
+  position: fixed;
+  box-sizing: border-box;
+  max-width: 320px;
+  padding: 8px 12px;
+  font-size: 13px;
+  line-height: 1.5;
+  word-break: break-word;
+  pointer-events: auto;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  box-shadow: var(--qiu-box-shadow-light, 0 4px 12px rgba(0, 0, 0, 0.12));
+}
+
+.qiu-tips__title {
+  margin-bottom: 4px;
+  font-weight: 600;
+}
+
+.qiu-tips__content {
+  position: relative;
+  z-index: 1;
+}
+
+.qiu-tips__arrow {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  pointer-events: none;
+  background: inherit;
+  border: inherit;
+  border-right: 0;
+  border-bottom: 0;
+}
+
+.qiu-tips--top .qiu-tips__arrow {
+  bottom: -6px;
+  left: 50%;
+  margin-left: -5px;
+  transform: rotate(-135deg);
+}
+
+.qiu-tips--bottom .qiu-tips__arrow {
+  top: -6px;
+  left: 50%;
+  margin-left: -5px;
+  transform: rotate(45deg);
+}
+
+.qiu-tips--left .qiu-tips__arrow {
+  top: 50%;
+  right: -6px;
+  margin-top: -5px;
+  transform: rotate(135deg);
+}
+
+.qiu-tips--right .qiu-tips__arrow {
+  top: 50%;
+  left: -6px;
+  margin-top: -5px;
+  transform: rotate(-45deg);
+}
+
+.qiu-tips--primary { --qiu-tips-color: var(--qiu-color-primary, #0f766e); }
+.qiu-tips--success { --qiu-tips-color: var(--qiu-color-success, #67c23a); }
+.qiu-tips--warning { --qiu-tips-color: var(--qiu-color-warning, #e6a23c); }
+.qiu-tips--danger { --qiu-tips-color: var(--qiu-color-danger, #f56c6c); }
+.qiu-tips--info { --qiu-tips-color: var(--qiu-color-info, #909399); }
+.qiu-tips--cyan { --qiu-tips-color: #0ea5e9; }
+.qiu-tips--orange { --qiu-tips-color: #f97316; }
+.qiu-tips--pink { --qiu-tips-color: #ec4899; }
+.qiu-tips--teal { --qiu-tips-color: #14b8a6; }
+
+.qiu-tips--dark {
+  color: #fff;
+  background: var(--qiu-tips-color);
+  border-color: var(--qiu-tips-color);
+}
+
+.qiu-tips--light {
+  color: var(--qiu-tips-color);
+  background: #fff;
+  border-color: color-mix(in srgb, var(--qiu-tips-color) 45%, #fff);
+
+  .qiu-tips__title {
+    color: var(--qiu-tips-color);
+  }
+}
+
+.qiu-tips-fade-enter-active,
+.qiu-tips-fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.qiu-tips-fade-enter-from,
+.qiu-tips-fade-leave-to {
+  opacity: 0;
+}
+</style>

package/components/QiuTooltip/index.vue

@@ -0,0 +1,237 @@
+<template>
+  <span class="qiu-tooltip-host" v-bind="attrs">
+    <span
+      ref="triggerRef"
+      class="qiu-tooltip__trigger"
+      @mouseenter="onEnter"
+      @mouseleave="onLeave"
+    >
+      <slot />
+    </span>
+
+    <Teleport to="body">
+      <Transition name="qiu-tooltip-fade">
+        <div
+          v-show="visible"
+          ref="popperRef"
+          class="qiu-tooltip"
+          :class="[`qiu-tooltip--${placement}`]"
+          :style="popperStyle"
+          role="tooltip"
+          @mouseenter="onPopperEnter"
+          @mouseleave="onLeave"
+        >
+          <div class="qiu-tooltip__content">
+            <slot name="content">{{ content }}</slot>
+          </div>
+          <span class="qiu-tooltip__arrow" />
+        </div>
+      </Transition>
+    </Teleport>
+  </span>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuTooltip', inheritAttrs: false })
+
+type Placement = 'top' | 'bottom' | 'left' | 'right'
+
+const attrs = useAttrs()
+
+const props = withDefaults(
+  defineProps<{
+    content?: string
+    placement?: Placement
+    /** hover 延迟显示（ms） */
+    showAfter?: number
+    /** hover 延迟隐藏（ms） */
+    hideAfter?: number
+  }>(),
+  {
+    content: '',
+    placement: 'top',
+    showAfter: 0,
+    hideAfter: 100,
+  }
+)
+
+const triggerRef = ref<HTMLElement | null>(null)
+const popperRef = ref<HTMLElement | null>(null)
+const visible = ref(false)
+const popperStyle = ref<Record<string, string>>({})
+
+let showTimer: ReturnType<typeof setTimeout> | undefined
+let hideTimer: ReturnType<typeof setTimeout> | undefined
+let inPopper = false
+
+const updatePosition = () => {
+  const trigger = triggerRef.value
+  const popper = popperRef.value
+  if (!trigger || !popper) return
+
+  const rect = trigger.getBoundingClientRect()
+  const popRect = popper.getBoundingClientRect()
+  const gap = 8
+  let top = 0
+  let left = 0
+
+  switch (props.placement) {
+    case 'bottom':
+      top = rect.bottom + gap
+      left = rect.left + rect.width / 2 - popRect.width / 2
+      break
+    case 'left':
+      top = rect.top + rect.height / 2 - popRect.height / 2
+      left = rect.left - popRect.width - gap
+      break
+    case 'right':
+      top = rect.top + rect.height / 2 - popRect.height / 2
+      left = rect.right + gap
+      break
+    default:
+      top = rect.top - popRect.height - gap
+      left = rect.left + rect.width / 2 - popRect.width / 2
+  }
+
+  const vw = window.innerWidth
+  const vh = window.innerHeight
+  left = Math.min(Math.max(4, left), vw - popRect.width - 4)
+  top = Math.min(Math.max(4, top), vh - popRect.height - 4)
+
+  popperStyle.value = {
+    position: 'fixed',
+    top: `${top}px`,
+    left: `${left}px`,
+    zIndex: '3000',
+  }
+}
+
+const clearTimers = () => {
+  if (showTimer) clearTimeout(showTimer)
+  if (hideTimer) clearTimeout(hideTimer)
+  showTimer = undefined
+  hideTimer = undefined
+}
+
+const show = async () => {
+  clearTimers()
+  showTimer = setTimeout(async () => {
+    visible.value = true
+    await nextTick()
+    updatePosition()
+  }, props.showAfter)
+}
+
+const hide = () => {
+  clearTimers()
+  hideTimer = setTimeout(() => {
+    if (!inPopper) visible.value = false
+  }, props.hideAfter)
+}
+
+const onEnter = () => {
+  inPopper = false
+  show()
+}
+
+const onLeave = () => hide()
+
+const onPopperEnter = () => {
+  inPopper = true
+  clearTimers()
+}
+
+const onScrollOrResize = () => {
+  if (visible.value) updatePosition()
+}
+
+watch(visible, (v) => {
+  if (v) {
+    window.addEventListener('scroll', onScrollOrResize, true)
+    window.addEventListener('resize', onScrollOrResize)
+  } else {
+    window.removeEventListener('scroll', onScrollOrResize, true)
+    window.removeEventListener('resize', onScrollOrResize)
+  }
+})
+
+onBeforeUnmount(() => {
+  clearTimers()
+  window.removeEventListener('scroll', onScrollOrResize, true)
+  window.removeEventListener('resize', onScrollOrResize)
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-tooltip-host {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.qiu-tooltip__trigger {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.qiu-tooltip {
+  position: fixed;
+  max-width: 320px;
+  padding: 6px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #fff;
+  word-break: break-word;
+  background: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
+  border-radius: 4px;
+  box-shadow: var(--qiu-box-shadow-light, 0 2px 8px rgba(0, 0, 0, 0.12));
+  box-sizing: border-box;
+  pointer-events: auto;
+}
+
+.qiu-tooltip__content {
+  position: relative;
+  z-index: 1;
+}
+
+.qiu-tooltip__arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+  transform: rotate(45deg);
+}
+
+.qiu-tooltip--top .qiu-tooltip__arrow {
+  bottom: -4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+.qiu-tooltip--bottom .qiu-tooltip__arrow {
+  top: -4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+.qiu-tooltip--left .qiu-tooltip__arrow {
+  top: 50%;
+  right: -4px;
+  margin-top: -4px;
+}
+
+.qiu-tooltip--right .qiu-tooltip__arrow {
+  top: 50%;
+  left: -4px;
+  margin-top: -4px;
+}
+
+.qiu-tooltip-fade-enter-active,
+.qiu-tooltip-fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.qiu-tooltip-fade-enter-from,
+.qiu-tooltip-fade-leave-to {
+  opacity: 0;
+}
+</style>