foucui 1.0.1

package/components/QiuInputOtp/index.vue

@@ -0,0 +1,190 @@
+<template>
+  <div
+    ref="rootRef"
+    class="qiu-otp"
+    :class="[`qiu-otp--${size}`, { 'is-disabled': disabled }]"
+    @paste="onPaste"
+  >
+    <input
+      v-for="(cell, i) in cells"
+      :key="i"
+      :ref="(el) => setInputRef(el, i)"
+      class="qiu-otp__input"
+      :class="{ 'is-filled': !!cell }"
+      :value="cell"
+      :disabled="disabled"
+      :type="mask ? 'password' : 'text'"
+      inputmode="numeric"
+      maxlength="1"
+      :aria-label="`验证码第 ${i + 1} 位`"
+      @input="onInput($event, i)"
+      @keydown="onKeydown($event, i)"
+      @focus="onFocus($event, i)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, ref, watch } from 'vue'
+
+defineOptions({ name: 'QiuOtp' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    length?: number
+    size?: 'small' | 'default' | 'large'
+    disabled?: boolean
+    mask?: boolean
+    /** 仅允许数字 */
+    numeric?: boolean
+  }>(),
+  {
+    modelValue: '',
+    length: 6,
+    size: 'default',
+    disabled: false,
+    mask: false,
+    numeric: true,
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [string]
+  change: [string]
+  complete: [string]
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const inputRefs = ref<(HTMLInputElement | null)[]>([])
+
+const cells = computed(() => {
+  const arr = String(props.modelValue || '')
+    .slice(0, props.length)
+    .split('')
+  const out: string[] = []
+  for (let i = 0; i < props.length; i++) out.push(arr[i] ?? '')
+  return out
+})
+
+const setInputRef = (el: any, i: number) => {
+  inputRefs.value[i] = el as HTMLInputElement | null
+}
+
+const emitValue = (next: string[]) => {
+  const str = next.join('')
+  emit('update:modelValue', str)
+  emit('change', str)
+  if (str.length === props.length && !next.includes('')) emit('complete', str)
+}
+
+const focusAt = (i: number) => {
+  nextTick(() => inputRefs.value[i]?.focus())
+}
+
+const onInput = (e: Event, i: number) => {
+  const target = e.target as HTMLInputElement
+  let v = target.value
+  if (props.numeric) v = v.replace(/\D/g, '')
+  v = v.slice(-1)
+  const next = [...cells.value]
+  next[i] = v
+  // 自动跳到下一个
+  if (v && i < props.length - 1) focusAt(i + 1)
+  emitValue(next)
+}
+
+const onKeydown = (e: KeyboardEvent, i: number) => {
+  if (e.key === 'Backspace') {
+    const next = [...cells.value]
+    if (next[i]) {
+      next[i] = ''
+      emitValue(next)
+    } else if (i > 0) {
+      next[i - 1] = ''
+      emitValue(next)
+      focusAt(i - 1)
+    }
+    e.preventDefault()
+  } else if (e.key === 'ArrowLeft' && i > 0) {
+    focusAt(i - 1)
+  } else if (e.key === 'ArrowRight' && i < props.length - 1) {
+    focusAt(i + 1)
+  }
+}
+
+const onFocus = (e: FocusEvent, i: number) => {
+  const target = e.target as HTMLInputElement
+  target.select()
+}
+
+const onPaste = (e: ClipboardEvent) => {
+  e.preventDefault()
+  let text = e.clipboardData?.getData('text') ?? ''
+  if (props.numeric) text = text.replace(/\D/g, '')
+  const chars = text.slice(0, props.length).split('')
+  const next = [...cells.value]
+  chars.forEach((c, i) => (next[i] = c))
+  emitValue(next)
+  focusAt(Math.min(chars.length, props.length - 1))
+}
+
+watch(
+  () => props.length,
+  () => (inputRefs.value = [])
+)
+</script>
+
+<style lang="scss" scoped>
+.qiu-otp {
+  display: inline-flex;
+  gap: 8px;
+  vertical-align: middle;
+
+  &.is-disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+
+.qiu-otp__input {
+  box-sizing: border-box;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+  color: var(--qiu-text-color-primary, #303133);
+  background: var(--qiu-bg-color, #fff);
+  border: 1px solid var(--qiu-border-color, #dcdfe6);
+  border-radius: var(--qiu-border-radius-base, 4px);
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+  &:hover {
+    border-color: var(--qiu-border-color-hover, #c0c4cc);
+  }
+
+  &:focus {
+    border-color: var(--qiu-color-primary, #409eff);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--qiu-color-primary, #409eff) 25%, transparent);
+  }
+
+  &.is-filled {
+    border-color: var(--qiu-color-primary, #409eff);
+  }
+}
+
+.qiu-otp--small .qiu-otp__input {
+  width: 32px;
+  height: 32px;
+  font-size: 15px;
+}
+
+.qiu-otp--large .qiu-otp__input {
+  width: 48px;
+  height: 48px;
+  font-size: 20px;
+}
+</style>

package/components/QiuKbd/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <kbd class="qiu-kbd" :class="[`qiu-kbd--${size}`]">
+    <slot />
+  </kbd>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuKbd' })
+
+withDefaults(
+  defineProps<{
+    size?: 'small' | 'default' | 'large'
+  }>(),
+  {
+    size: 'default',
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.qiu-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  font-family: var(--qiu-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  line-height: 1;
+  color: var(--qiu-text-color-regular, #606266);
+  white-space: nowrap;
+  background: var(--qiu-fill-color-blank, #fff);
+  border: 1px solid var(--qiu-border-color, #dcdfe6);
+  border-bottom-width: 2px;
+  border-radius: 6px;
+  box-shadow: 0 1px 0 var(--qiu-border-color-lighter, #ebeef5);
+}
+
+.qiu-kbd--small {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: 11px;
+}
+
+.qiu-kbd--default {
+  min-width: 22px;
+  height: 22px;
+  padding: 0 6px;
+  font-size: 12px;
+}
+
+.qiu-kbd--large {
+  min-width: 26px;
+  height: 26px;
+  padding: 0 8px;
+  font-size: 13px;
+}
+</style>

package/components/QiuLayoutContainer/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="qiu-layout" :class="[`qiu-layout--${direction}`]">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuLayoutContainer' })
+
+withDefaults(
+  defineProps<{
+    /** 主轴方向 */
+    direction?: 'horizontal' | 'vertical'
+    /** 子项是否均分 */
+    fit?: boolean
+    /** 间距(px) */
+    gap?: number
+  }>(),
+  {
+    direction: 'horizontal',
+    fit: false,
+    gap: 12,
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.qiu-layout {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+
+  &--horizontal {
+    flex-direction: row;
+  }
+
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &--vertical > :deep(*) {
+    width: 100%;
+  }
+
+  &--horizontal.qiu-layout--fit > :deep(*) {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+}
+</style>

package/components/QiuLinkPreview/index.vue

@@ -0,0 +1,224 @@
+<template>
+  <a
+    ref="triggerRef"
+    class="qiu-link-preview"
+    :href="href"
+    :target="target"
+    rel="noopener noreferrer"
+    @mouseenter="onEnter"
+    @mouseleave="onLeave"
+  >
+    <slot>{{ href }}</slot>
+  </a>
+
+  <Teleport to="body">
+    <Transition name="qiu-link-preview-fade">
+      <div
+        v-if="visible"
+        ref="cardRef"
+        class="qiu-link-preview__panel"
+        :style="panelStyle"
+        @mouseenter="onCardEnter"
+        @mouseleave="onCardLeave"
+      >
+        <div v-if="image" class="qiu-link-preview__image" :style="{ backgroundImage: `url(${image})` }" />
+        <div class="qiu-link-preview__content">
+          <div class="qiu-link-preview__host">
+            <qiu-icon icon="links-line" />
+            <span>{{ host }}</span>
+          </div>
+          <div v-if="title" class="qiu-link-preview__title">{{ title }}</div>
+          <div v-if="description" class="qiu-link-preview__desc">{{ description }}</div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, ref } from 'vue'
+
+defineOptions({ name: 'QiuLinkPreview' })
+
+const props = withDefaults(
+  defineProps<{
+    href: string
+    title?: string
+    description?: string
+    image?: string
+    target?: string
+    openDelay?: number
+    closeDelay?: number
+  }>(),
+  {
+    title: '',
+    description: '',
+    image: '',
+    target: '_blank',
+    openDelay: 200,
+    closeDelay: 150,
+  }
+)
+
+const emit = defineEmits<{ visibleChange: [boolean] }>()
+
+const triggerRef = ref<HTMLElement | null>(null)
+const cardRef = ref<HTMLElement | null>(null)
+const visible = ref(false)
+const panelStyle = ref<Record<string, string>>({})
+let openTimer: ReturnType<typeof setTimeout> | undefined
+let closeTimer: ReturnType<typeof setTimeout> | undefined
+let inCard = false
+
+const host = computed(() => {
+  try {
+    return new URL(props.href).hostname
+  } catch {
+    return props.href
+  }
+})
+
+const clearTimers = () => {
+  if (openTimer) clearTimeout(openTimer)
+  if (closeTimer) clearTimeout(closeTimer)
+}
+
+const open = async () => {
+  clearTimers()
+  openTimer = setTimeout(async () => {
+    visible.value = true
+    emit('visibleChange', true)
+    await nextTick()
+    updatePosition()
+  }, props.openDelay)
+}
+
+const scheduleClose = () => {
+  clearTimers()
+  closeTimer = setTimeout(() => {
+    if (!inCard) {
+      visible.value = false
+      emit('visibleChange', false)
+    }
+  }, props.closeDelay)
+}
+
+const onEnter = () => open()
+const onLeave = () => scheduleClose()
+const onCardEnter = () => {
+  inCard = true
+  clearTimers()
+}
+const onCardLeave = () => {
+  inCard = false
+  scheduleClose()
+}
+
+const updatePosition = () => {
+  const trigger = triggerRef.value
+  const card = cardRef.value
+  if (!trigger || !card) return
+  const rect = trigger.getBoundingClientRect()
+  const cardRect = card.getBoundingClientRect()
+  const gap = 10
+  let top = rect.bottom + gap
+  if (top + cardRect.height > window.innerHeight - 4) top = rect.top - cardRect.height - gap
+  let left = rect.left
+  left = Math.min(Math.max(4, left), window.innerWidth - cardRect.width - 4)
+  top = Math.max(4, top)
+  panelStyle.value = {
+    position: 'fixed',
+    top: `${top}px`,
+    left: `${left}px`,
+    width: `${Math.min(320, window.innerWidth - 8)}px`,
+    zIndex: '2100',
+  }
+}
+
+const onScrollOrResize = () => 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-link-preview {
+  color: var(--qiu-color-primary, #409eff);
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.qiu-link-preview__panel {
+  box-sizing: border-box;
+  overflow: hidden;
+  background: var(--qiu-bg-color-overlay, #fff);
+  border: 1px solid var(--qiu-border-color-light, #e4e7ed);
+  border-radius: 10px;
+  box-shadow: var(--qiu-box-shadow-light, 0 6px 16px rgba(0, 0, 0, 0.12));
+}
+
+.qiu-link-preview__image {
+  height: 120px;
+  background-color: var(--qiu-fill-color-light, #f5f7fa);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+
+.qiu-link-preview__content {
+  padding: 12px 14px;
+}
+
+.qiu-link-preview__host {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 6px;
+  font-size: 12px;
+  color: var(--qiu-text-color-secondary, #909399);
+}
+
+.qiu-link-preview__title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--qiu-text-color-primary, #303133);
+}
+
+.qiu-link-preview__desc {
+  margin-top: 4px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--qiu-text-color-regular, #606266);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.qiu-link-preview-fade-enter-active,
+.qiu-link-preview-fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.qiu-link-preview-fade-enter-from,
+.qiu-link-preview-fade-leave-to {
+  opacity: 0;
+}
+</style>

package/components/QiuLoading/index.ts

@@ -0,0 +1,176 @@
+/**
+ * QiuLoading — 指令 vQiuLoading + 服务 qiuLoading.service
+ *
+ * 使用：
+ *   import { vQiuLoading, qiuLoading } from '.../QiuLoading'
+ *   app.directive('qiu-loading', vQiuLoading)
+ *
+ *   v-qiu-loading="true"
+ *   v-qiu-loading="{ loading: true, text: '加载中', effect: 'dots' }"
+ *   qiuLoading.service({ target: el, text: '...', effect: 'bars' })
+ */
+import { createApp, h, type App, type Directive, type DirectiveBinding } from 'vue'
+import QiuLoadingSpinner from './spinner.vue'
+import { QIU_LOADING_EFFECTS, type QiuLoadingEffect } from './types'
+
+export type { QiuLoadingEffect }
+export { QIU_LOADING_EFFECTS }
+
+export interface QiuLoadingOptions {
+  target?: HTMLElement | string
+  text?: string
+  fullscreen?: boolean
+  transparent?: boolean
+  /** 动画效果，见 QIU_LOADING_EFFECTS */
+  effect?: QiuLoadingEffect
+  /** directive 绑定值 */
+  loading?: boolean
+}
+
+interface LoadingInstance {
+  app: App
+  el: HTMLElement
+  host: HTMLElement
+  text: string
+  effect: QiuLoadingEffect
+  transparent: boolean
+}
+
+const instanceMap = new WeakMap<HTMLElement, LoadingInstance>()
+
+const resolveTarget = (target?: HTMLElement | string): HTMLElement => {
+  if (target instanceof HTMLElement) return target
+  if (typeof target === 'string') {
+    const el = document.querySelector(target)
+    if (el instanceof HTMLElement) return el
+  }
+  return document.body
+}
+
+const ensureRelative = (el: HTMLElement) => {
+  const pos = getComputedStyle(el).position
+  if (pos === 'static' || !pos) {
+    el.dataset.qiuLoadingPrevPosition = el.style.position || ''
+    el.style.position = 'relative'
+  }
+}
+
+const restorePosition = (el: HTMLElement) => {
+  if ('qiuLoadingPrevPosition' in el.dataset) {
+    el.style.position = el.dataset.qiuLoadingPrevPosition || ''
+    delete el.dataset.qiuLoadingPrevPosition
+  }
+}
+
+const parseBinding = (binding: DirectiveBinding<boolean | QiuLoadingOptions>): QiuLoadingOptions => {
+  if (typeof binding.value === 'object' && binding.value !== null) {
+    return { ...binding.value }
+  }
+  return { loading: !!binding.value }
+}
+
+const getLoadingState = (binding: DirectiveBinding<boolean | QiuLoadingOptions>): boolean => {
+  if (typeof binding.value === 'object' && binding.value !== null) {
+    if ((binding.value as QiuLoadingOptions).loading === undefined) return true
+    return !!(binding.value as QiuLoadingOptions).loading
+  }
+  return !!binding.value
+}
+
+const mountLoading = (host: HTMLElement, options: QiuLoadingOptions) => {
+  const text = options.text || ''
+  const effect: QiuLoadingEffect = options.effect || 'spinner'
+  const transparent = !!options.transparent
+  const existing = instanceMap.get(host)
+  // 已在 loading 且参数未变：勿重复挂载
+  if (
+    existing &&
+    existing.text === text &&
+    existing.effect === effect &&
+    existing.transparent === transparent
+  ) {
+    return existing
+  }
+  if (existing) {
+    existing.app.unmount()
+    existing.el.remove()
+    instanceMap.delete(host)
+  }
+
+  const isFullscreen = options.fullscreen ?? host === document.body
+  if (!isFullscreen) ensureRelative(host)
+
+  const el = document.createElement('div')
+  el.className = 'qiu-loading-host'
+  host.appendChild(el)
+
+  const app = createApp({
+    setup() {
+      return () =>
+        h(QiuLoadingSpinner, {
+          text,
+          fullscreen: isFullscreen,
+          transparent,
+          effect,
+        })
+    },
+  })
+
+  app.mount(el)
+  const inst: LoadingInstance = { app, el, host, text, effect, transparent }
+  instanceMap.set(host, inst)
+  return inst
+}
+
+const unmountLoading = (host: HTMLElement) => {
+  const inst = instanceMap.get(host)
+  if (!inst) return
+  inst.app.unmount()
+  inst.el.remove()
+  instanceMap.delete(host)
+  if (host !== document.body) restorePosition(host)
+}
+
+export const vQiuLoading: Directive<HTMLElement, boolean | QiuLoadingOptions> = {
+  mounted(el, binding) {
+    if (getLoadingState(binding)) {
+      const opts = parseBinding(binding)
+      mountLoading(el, { ...opts, loading: true })
+    }
+  },
+  updated(el, binding) {
+    const opts = parseBinding(binding)
+    if (getLoadingState(binding)) {
+      mountLoading(el, { ...opts, loading: true })
+    } else {
+      unmountLoading(el)
+    }
+  },
+  unmounted(el) {
+    unmountLoading(el)
+  },
+}
+
+export const qiuLoading = {
+  service(options: QiuLoadingOptions = {}) {
+    const host = resolveTarget(options.target)
+    const isBody = host === document.body
+    mountLoading(host, {
+      ...options,
+      loading: true,
+      fullscreen: options.fullscreen ?? isBody,
+    })
+
+    return {
+      close: () => unmountLoading(host),
+    }
+  },
+}
+
+export default {
+  install(app: App) {
+    app.directive('qiu-loading', vQiuLoading)
+  },
+}
+
+export { QiuLoadingSpinner }