foucui 1.0.1

package/components/QiuPopover/index.vue

@@ -0,0 +1,277 @@
+<template>
+  <span class="qiu-popover-host" v-bind="attrs">
+    <span
+      ref="triggerRef"
+      class="qiu-popover__trigger"
+      @click="onTriggerClick"
+      @mouseenter="onTriggerEnter"
+      @mouseleave="onTriggerLeave"
+    >
+      <slot name="reference" />
+    </span>
+
+    <Teleport to="body">
+      <Transition name="qiu-popover-fade">
+        <div v-show="isVisible" class="qiu-popover-root" :style="{ zIndex: String(zIndex) }">
+          <div
+            v-if="trigger === 'click'"
+            class="qiu-popover__mask"
+            @click="onMaskClick"
+          />
+          <div
+            ref="popperRef"
+            class="qiu-popover"
+            :class="[`qiu-popover--${placement}`]"
+            :style="popperStyle"
+            role="dialog"
+            @mouseenter="onPopperEnter"
+            @mouseleave="onPopperLeave"
+            @click.stop
+          >
+            <div v-if="title || $slots.title" class="qiu-popover__title">
+              <slot name="title">{{ title }}</slot>
+            </div>
+            <div class="qiu-popover__body">
+              <slot />
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </span>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuPopover', inheritAttrs: false })
+
+type Placement = 'top' | 'bottom' | 'left' | 'right'
+type Trigger = 'click' | 'hover'
+
+const attrs = useAttrs()
+
+const props = withDefaults(
+  defineProps<{
+    visible?: boolean
+    title?: string
+    width?: string | number
+    placement?: Placement
+    trigger?: Trigger
+    /** 点击遮罩关闭（仅 click 模式） */
+    closeOnClickOutside?: boolean
+    zIndex?: number
+  }>(),
+  {
+    title: '',
+    width: 240,
+    placement: 'bottom',
+    trigger: 'click',
+    closeOnClickOutside: true,
+    zIndex: 2000,
+  }
+)
+
+const emit = defineEmits<{
+  'update:visible': [boolean]
+  show: []
+  hide: []
+}>()
+
+const triggerRef = ref<HTMLElement | null>(null)
+const popperRef = ref<HTMLElement | null>(null)
+const internalVisible = ref(false)
+const popperStyle = ref<Record<string, string>>({})
+const inPopper = ref(false)
+
+const isControlled = computed(() => props.visible !== undefined)
+const isVisible = computed({
+  get: () => (isControlled.value ? !!props.visible : internalVisible.value),
+  set: (v: boolean) => {
+    if (isControlled.value) emit('update:visible', v)
+    else internalVisible.value = v
+  },
+})
+
+const resolvedWidth = computed(() =>
+  typeof props.width === 'number' ? `${props.width}px` : String(props.width)
+)
+
+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 'top':
+      top = rect.top - popRect.height - 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.bottom + 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`,
+    width: resolvedWidth.value,
+  }
+}
+
+const open = async () => {
+  if (isVisible.value) return
+  isVisible.value = true
+  emit('show')
+  await nextTick()
+  updatePosition()
+}
+
+const close = () => {
+  if (!isVisible.value) return
+  isVisible.value = false
+  emit('hide')
+}
+
+const onTriggerClick = () => {
+  if (props.trigger !== 'click') return
+  if (isVisible.value) close()
+  else open()
+}
+
+let hoverTimer: ReturnType<typeof setTimeout> | undefined
+
+const onTriggerEnter = () => {
+  if (props.trigger !== 'hover') return
+  if (hoverTimer) clearTimeout(hoverTimer)
+  open()
+}
+
+const onTriggerLeave = () => {
+  if (props.trigger !== 'hover') return
+  hoverTimer = setTimeout(() => {
+    if (!inPopper.value) close()
+  }, 120)
+}
+
+const onPopperEnter = () => {
+  inPopper.value = true
+  if (hoverTimer) clearTimeout(hoverTimer)
+}
+
+const onPopperLeave = () => {
+  inPopper.value = false
+  if (props.trigger === 'hover') onTriggerLeave()
+}
+
+const onMaskClick = () => {
+  if (props.trigger === 'click' && props.closeOnClickOutside) close()
+}
+
+const onDocClick = (e: MouseEvent) => {
+  if (props.trigger !== 'click' || !isVisible.value) return
+  const t = e.target as Node
+  if (triggerRef.value?.contains(t) || popperRef.value?.contains(t)) return
+  if (props.closeOnClickOutside) close()
+}
+
+const onScrollOrResize = () => {
+  if (isVisible.value) updatePosition()
+}
+
+watch(isVisible, (v) => {
+  if (v) {
+    document.addEventListener('click', onDocClick, true)
+    window.addEventListener('scroll', onScrollOrResize, true)
+    window.addEventListener('resize', onScrollOrResize)
+  } else {
+    document.removeEventListener('click', onDocClick, true)
+    window.removeEventListener('scroll', onScrollOrResize, true)
+    window.removeEventListener('resize', onScrollOrResize)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (hoverTimer) clearTimeout(hoverTimer)
+  document.removeEventListener('click', onDocClick, true)
+  window.removeEventListener('scroll', onScrollOrResize, true)
+  window.removeEventListener('resize', onScrollOrResize)
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-popover-host {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.qiu-popover__trigger {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.qiu-popover-root {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+}
+
+.qiu-popover__mask {
+  position: absolute;
+  inset: 0;
+  pointer-events: auto;
+  background: transparent;
+}
+
+.qiu-popover {
+  position: fixed;
+  pointer-events: auto;
+  background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
+  border: 1px solid var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
+  border-radius: 4px;
+  box-shadow: var(--qiu-box-shadow-light, 0 4px 12px rgba(0, 0, 0, 0.1));
+  box-sizing: border-box;
+}
+
+.qiu-popover__title {
+  padding: 10px 12px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
+}
+
+.qiu-popover__body {
+  padding: 10px 12px 12px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
+}
+
+.qiu-popover-fade-enter-active,
+.qiu-popover-fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.qiu-popover-fade-enter-from,
+.qiu-popover-fade-leave-to {
+  opacity: 0;
+}
+</style>

package/components/QiuProgress/index.vue

@@ -0,0 +1,235 @@
+<template>
+  <div
+    class="qiu-progress"
+    :class="[
+      `qiu-progress--${type}`,
+      { 'is-success': resolvedStatus === 'success', 'is-exception': resolvedStatus === 'exception', 'is-warning': resolvedStatus === 'warning' },
+    ]"
+    role="progressbar"
+    :aria-valuenow="clampedPercent"
+    aria-valuemin="0"
+    aria-valuemax="100"
+  >
+    <!-- line -->
+    <template v-if="type === 'line'">
+      <div class="qiu-progress__outer" :style="{ height: `${strokeWidth}px` }">
+        <div
+          class="qiu-progress__inner"
+          :class="{ 'is-text-inside': textInside }"
+          :style="barStyle"
+        >
+          <span v-if="textInside && showText" class="qiu-progress__text qiu-progress__text--inside">
+            <slot name="default">{{ displayText }}</slot>
+          </span>
+        </div>
+      </div>
+      <span v-if="!textInside && showText" class="qiu-progress__text">
+        <slot name="default">{{ displayText }}</slot>
+      </span>
+    </template>
+
+    <!-- circle / dashboard -->
+    <div v-else class="qiu-progress__circle" :style="{ width: `${width}px`, height: `${width}px` }">
+      <svg :viewBox="`0 0 ${width} ${width}`">
+        <circle
+          class="qiu-progress__track"
+          :cx="center"
+          :cy="center"
+          :r="radius"
+          fill="none"
+          :stroke-width="strokeWidth"
+        />
+        <circle
+          class="qiu-progress__path"
+          :cx="center"
+          :cy="center"
+          :r="radius"
+          fill="none"
+          :stroke="strokeColor"
+          :stroke-width="strokeWidth"
+          :stroke-dasharray="circumference"
+          :stroke-dashoffset="dashOffset"
+          :stroke-linecap="type === 'dashboard' ? 'round' : 'butt'"
+          :transform="circleTransform"
+        />
+      </svg>
+      <div v-if="showText" class="qiu-progress__circle-text">
+        <slot name="default">{{ displayText }}</slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuProgress' })
+
+const props = withDefaults(
+  defineProps<{
+    percentage?: number
+    type?: 'line' | 'circle' | 'dashboard'
+    status?: 'success' | 'exception' | 'warning' | ''
+    strokeWidth?: number
+    textInside?: boolean
+    color?: string | ((pct: number) => string)
+    showText?: boolean
+    width?: number
+  }>(),
+  {
+    percentage: 0,
+    type: 'line',
+    status: '',
+    strokeWidth: 6,
+    textInside: false,
+    showText: true,
+    width: 126,
+  }
+)
+
+const clampedPercent = computed(() => Math.min(100, Math.max(0, props.percentage)))
+
+const resolvedStatus = computed(() => {
+  if (props.status) return props.status
+  if (clampedPercent.value >= 100) return 'success'
+  return ''
+})
+
+const statusColor = computed(() => {
+  const map: Record<string, string> = {
+    success: 'var(--qiu-color-success, var(--qiu-color-success, #67c23a))',
+    exception: 'var(--qiu-color-danger, var(--qiu-color-danger, #f56c6c))',
+    warning: 'var(--qiu-color-warning, var(--qiu-color-warning, #e6a23c))',
+  }
+  return map[resolvedStatus.value] || 'var(--qiu-color-primary, var(--qiu-color-primary, #0f766e))'
+})
+
+const strokeColor = computed(() => {
+  if (typeof props.color === 'string') return props.color
+  if (typeof props.color === 'function') return props.color(clampedPercent.value)
+  return statusColor.value
+})
+
+const barStyle = computed(() => ({
+  width: `${clampedPercent.value}%`,
+  backgroundColor: strokeColor.value,
+}))
+
+const displayText = computed(() => {
+  if (resolvedStatus.value === 'success') return '✓'
+  if (resolvedStatus.value === 'exception') return '✕'
+  if (resolvedStatus.value === 'warning') return '!'
+  return `${clampedPercent.value}%`
+})
+
+const center = computed(() => props.width / 2)
+const radius = computed(() => (props.width - props.strokeWidth) / 2)
+const circumference = computed(() => 2 * Math.PI * radius.value)
+
+const arcRatio = computed(() => (props.type === 'dashboard' ? 0.75 : 1))
+
+const dashOffset = computed(() => {
+  const pct = clampedPercent.value / 100
+  return circumference.value * (1 - pct * arcRatio.value)
+})
+
+const circleTransform = computed(() => {
+  if (props.type === 'dashboard') {
+    return `rotate(135 ${center.value} ${center.value})`
+  }
+  return `rotate(-90 ${center.value} ${center.value})`
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-progress {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  line-height: 1;
+
+  &--line {
+    width: 100%;
+    gap: 8px;
+  }
+
+  &--circle,
+  &--dashboard {
+    display: inline-block;
+  }
+}
+
+.qiu-progress__outer {
+  flex: 1;
+  overflow: hidden;
+  background: var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
+  border-radius: 100px;
+}
+
+.qiu-progress__inner {
+  height: 100%;
+  border-radius: 100px;
+  transition: width 0.3s ease;
+
+  &.is-text-inside {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-width: fit-content;
+  }
+}
+
+.qiu-progress__text {
+  flex-shrink: 0;
+  font-size: var(--qiu-font-size-small, 13px);
+  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
+
+  &--inside {
+    padding: 0 6px;
+    font-size: 12px;
+    color: #fff;
+    white-space: nowrap;
+  }
+}
+
+.qiu-progress__circle {
+  position: relative;
+  display: inline-block;
+
+  svg {
+    display: block;
+    transform: rotate(0deg);
+  }
+}
+
+.qiu-progress__track {
+  stroke: var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
+}
+
+.qiu-progress__path {
+  transition: stroke-dashoffset 0.3s ease;
+}
+
+.qiu-progress__circle-text {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--qiu-font-size, 14px);
+  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
+}
+
+.is-success .qiu-progress__text,
+.is-success .qiu-progress__circle-text {
+  color: var(--qiu-color-success, var(--qiu-color-success, #67c23a));
+}
+
+.is-exception .qiu-progress__text,
+.is-exception .qiu-progress__circle-text {
+  color: var(--qiu-color-danger, var(--qiu-color-danger, #f56c6c));
+}
+
+.is-warning .qiu-progress__text,
+.is-warning .qiu-progress__circle-text {
+  color: var(--qiu-color-warning, var(--qiu-color-warning, #e6a23c));
+}
+</style>