foucui 1.0.1

package/components/QiuLoading/types.ts

@@ -0,0 +1,44 @@
+export type QiuLoadingEffect =
+  | 'spinner'
+  | 'dual-ring'
+  | 'crescent'
+  | 'gradient'
+  | 'dash'
+  | 'dots'
+  | 'wave'
+  | 'bounce'
+  | 'bars'
+  | 'bricks'
+  | 'square'
+  | 'flip'
+  | 'pulse'
+  | 'ripple'
+  | 'orbit'
+  | 'radar'
+  | 'spiral'
+  | 'infinity'
+  | 'hourglass'
+  | 'skeleton'
+
+export const QIU_LOADING_EFFECTS: QiuLoadingEffect[] = [
+  'spinner',
+  'dual-ring',
+  'crescent',
+  'gradient',
+  'dash',
+  'dots',
+  'wave',
+  'bounce',
+  'bars',
+  'bricks',
+  'square',
+  'flip',
+  'pulse',
+  'ripple',
+  'orbit',
+  'radar',
+  'spiral',
+  'infinity',
+  'hourglass',
+  'skeleton',
+]

package/components/QiuMention/index.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="qiu-mention" :class="[`qiu-mention--${size}`, { 'is-disabled': disabled }]">
+    <textarea
+      v-if="type === 'textarea'"
+      ref="inputRef"
+      class="qiu-mention__input"
+      :value="modelValue"
+      :rows="rows"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      @input="onInput"
+      @keydown="onKeydown"
+      @keyup="onKeyup"
+    />
+    <input
+      v-else
+      ref="inputRef"
+      class="qiu-mention__input"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      @input="onInput"
+      @keydown="onKeydown"
+      @keyup="onKeyup"
+    />
+
+    <Teleport to="body">
+      <div
+        v-if="open"
+        ref="panelRef"
+        class="qiu-mention__panel"
+        :style="panelStyle"
+      >
+        <ul class="qiu-mention__list">
+          <li
+            v-for="(opt, i) in filtered"
+            :key="opt.value"
+            class="qiu-mention__option"
+            :class="{ 'is-active': i === activeIndex }"
+            @mousedown.prevent="select(opt)"
+            @mouseenter="activeIndex = i"
+          >
+            <span v-if="opt.avatar" class="qiu-mention__avatar">{{ opt.avatar }}</span>
+            <span class="qiu-mention__label">{{ opt.label }}</span>
+          </li>
+        </ul>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, ref, watch } from 'vue'
+
+defineOptions({ name: 'QiuMention' })
+
+interface MentionOption {
+  label: string
+  value: string | number
+  avatar?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    options?: MentionOption[]
+    triggerChar?: string
+    placeholder?: string
+    size?: 'small' | 'default' | 'large'
+    disabled?: boolean
+    type?: 'text' | 'textarea'
+    rows?: number
+  }>(),
+  {
+    modelValue: '',
+    options: () => [],
+    triggerChar: '@',
+    placeholder: '输入 @ 提及他人',
+    size: 'default',
+    disabled: false,
+    type: 'text',
+    rows: 3,
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [string]
+  select: [MentionOption]
+}>()
+
+const inputRef = ref<HTMLInputElement | HTMLTextAreaElement | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
+const open = ref(false)
+const activeIndex = ref(0)
+const keyword = ref('')
+const panelStyle = ref<Record<string, string>>({})
+
+const filtered = computed(() => {
+  const q = keyword.value.toLowerCase()
+  return props.options.filter((o) => o.label.toLowerCase().includes(q))
+})
+
+const onInput = (e: Event) => {
+  const val = (e.target as HTMLInputElement).value
+  emit('update:modelValue', val)
+  detectKeyword(val, (e.target as HTMLInputElement).selectionStart ?? val.length)
+}
+
+const detectKeyword = (val: string, caret: number) => {
+  const sub = val.slice(0, caret)
+  const idx = sub.lastIndexOf(props.triggerChar)
+  if (idx === -1) {
+    open.value = false
+    return
+  }
+  const seg = sub.slice(idx + 1)
+  // 关键词不得包含空格
+  if (/\s/.test(seg)) {
+    open.value = false
+    return
+  }
+  keyword.value = seg
+  activeIndex.value = 0
+  openPanel()
+}
+
+const openPanel = async () => {
+  open.value = true
+  await nextTick()
+  updatePosition()
+}
+
+const updatePosition = () => {
+  const input = inputRef.value
+  const panel = panelRef.value
+  if (!input || !panel) return
+  const rect = input.getBoundingClientRect()
+  const panelRect = panel.getBoundingClientRect()
+  const gap = 4
+  let top = rect.bottom + gap
+  if (top + panelRect.height > window.innerHeight - 4) top = rect.top - panelRect.height - gap
+  let left = Math.min(Math.max(4, rect.left), window.innerWidth - panelRect.width - 4)
+  top = Math.max(4, top)
+  panelStyle.value = {
+    position: 'fixed',
+    top: `${top}px`,
+    left: `${left}px`,
+    width: `${Math.max(rect.width, 180)}px`,
+    zIndex: '2100',
+  }
+}
+
+const insertMention = (opt: MentionOption) => {
+  const input = inputRef.value
+  if (!input) return
+  const val = props.modelValue
+  const caret = input.selectionStart ?? val.length
+  const sub = val.slice(0, caret)
+  const idx = sub.lastIndexOf(props.triggerChar)
+  const before = val.slice(0, idx)
+  const after = val.slice(caret)
+  const insert = `${props.triggerChar}${opt.label} `
+  const next = before + insert + after
+  emit('update:modelValue', next)
+  emit('select', opt)
+  open.value = false
+  nextTick(() => {
+    const pos = (before + insert).length
+    input.focus()
+    input.setSelectionRange(pos, pos)
+  })
+}
+
+const select = (opt: MentionOption) => insertMention(opt)
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (!open.value) return
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    if (activeIndex.value < filtered.value.length - 1) activeIndex.value++
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    if (activeIndex.value > 0) activeIndex.value--
+  } else if (e.key === 'Enter') {
+    e.preventDefault()
+    const opt = filtered.value[activeIndex.value]
+    if (opt) insertMention(opt)
+  } else if (e.key === 'Escape') {
+    open.value = false
+  }
+}
+
+const onKeyup = (e: KeyboardEvent) => {
+  if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) {
+    const input = e.target as HTMLInputElement
+    detectKeyword(input.value, input.selectionStart ?? 0)
+  }
+}
+
+const onDocClick = (e: MouseEvent) => {
+  if (!open.value) return
+  if (panelRef.value?.contains(e.target as Node)) return
+  open.value = false
+}
+
+watch(open, (v) => {
+  if (v) document.addEventListener('mousedown', onDocClick, true)
+  else document.removeEventListener('mousedown', onDocClick, true)
+})
+
+onBeforeUnmount(() => document.removeEventListener('mousedown', onDocClick, true))
+</script>
+
+<style lang="scss" scoped>
+.qiu-mention {
+  display: inline-flex;
+  width: 100%;
+  max-width: 100%;
+  vertical-align: middle;
+
+  &.is-disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+
+.qiu-mention__input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 6px 10px;
+  font-size: 14px;
+  font-family: inherit;
+  line-height: 1.5;
+  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;
+  resize: vertical;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+  &: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);
+  }
+
+  &::placeholder {
+    color: var(--qiu-text-color-placeholder, #a8abb2);
+  }
+}
+
+.qiu-mention__panel {
+  box-sizing: border-box;
+  max-height: 220px;
+  overflow-y: auto;
+  background: var(--qiu-bg-color-overlay, #fff);
+  border: 1px solid var(--qiu-border-color-light, #e4e7ed);
+  border-radius: var(--qiu-border-radius-base, 4px);
+  box-shadow: var(--qiu-box-shadow-light, 0 4px 12px rgba(0, 0, 0, 0.1));
+}
+
+.qiu-mention__list {
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+}
+
+.qiu-mention__option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  font-size: 14px;
+  color: var(--qiu-text-color-regular, #606266);
+  cursor: pointer;
+  border-radius: 4px;
+
+  &:hover,
+  &.is-active {
+    color: var(--qiu-color-primary, #409eff);
+    background: var(--qiu-color-primary-light-9, #ecf5ff);
+  }
+}
+
+.qiu-mention__avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  font-size: 12px;
+  color: #fff;
+  background: var(--qiu-color-primary, #409eff);
+  border-radius: 50%;
+}
+
+.qiu-mention--small .qiu-mention__input { padding: 4px 8px; font-size: 13px; }
+.qiu-mention--large .qiu-mention__input { padding: 8px 12px; font-size: 15px; }
+</style>

package/components/QiuMenu/QiuMenuRoot.vue

@@ -0,0 +1,241 @@
+<template>
+  <nav
+    class="qiu-route-menu"
+    :class="[
+      `qiu-route-menu--${mode}`,
+      {
+        'is-collapse': collapse,
+      },
+    ]"
+    role="menu"
+  >
+    <ul class="qiu-route-menu__list">
+      <slot />
+    </ul>
+  </nav>
+</template>
+
+<script lang="ts" setup>
+import type { QiuRouteMenuContext } from './context'
+import { QIU_ROUTE_MENU_KEY } from './context'
+
+defineOptions({ name: 'QiuMenuRoot' })
+
+const props = withDefaults(
+  defineProps<{
+    mode?: 'vertical' | 'horizontal'
+    defaultActive?: string
+    collapse?: boolean
+    uniqueOpened?: boolean
+    defaultOpeneds?: string[]
+    menuTrigger?: 'click' | 'hover'
+  }>(),
+  {
+    mode: 'vertical',
+    defaultActive: '',
+    collapse: false,
+    uniqueOpened: false,
+    defaultOpeneds: () => [],
+    menuTrigger: 'click',
+  }
+)
+
+const activeIndex = ref(props.defaultActive)
+const openSubs = ref<Set<string>>(new Set())
+
+watch(
+  () => props.defaultActive,
+  (val) => {
+    if (val) activeIndex.value = val
+  }
+)
+
+watch(
+  () => [...props.defaultOpeneds],
+  (paths) => {
+    paths.forEach((path) => openSub(path))
+  },
+  { immediate: true }
+)
+
+const modeRef = computed(() => props.mode)
+const collapseRef = computed(() => props.collapse)
+const uniqueOpenedRef = computed(() => props.uniqueOpened)
+const menuTriggerRef = computed(() => props.menuTrigger)
+const activeIndexRef = computed(() => activeIndex.value)
+
+const isSubOpen = (index: string) => openSubs.value.has(index)
+
+const openSub = (index: string) => {
+  // 收起/横向弹出：级联展开，仅保留祖先链 + 当前项（关闭同级其它分支）
+  if (props.collapse || props.mode === 'horizontal') {
+    const next = new Set<string>()
+    for (const p of openSubs.value) {
+      if (index === p || index.startsWith(`${p}/`)) next.add(p)
+    }
+    next.add(index)
+    openSubs.value = next
+    return
+  }
+  const next = new Set<string>()
+  // 手风琴：仅垂直非折叠，保留当前项及其祖先链，关闭同级其它分支
+  if (props.uniqueOpened && props.mode === 'vertical') {
+    for (const p of openSubs.value) {
+      if (index === p || index.startsWith(`${p}/`)) next.add(p)
+    }
+  } else {
+    for (const p of openSubs.value) next.add(p)
+  }
+  next.add(index)
+  openSubs.value = next
+}
+
+const closeSub = (index: string) => {
+  const next = new Set<string>()
+  for (const p of openSubs.value) {
+    // 关闭自身及所有子孙（path 前缀）
+    if (p === index || p.startsWith(`${index}/`)) continue
+    next.add(p)
+  }
+  openSubs.value = next
+}
+
+const closeAll = () => {
+  openSubs.value = new Set()
+}
+
+let flyoutLeaveTimer: ReturnType<typeof setTimeout> | null = null
+
+const isFlyoutHovering = () =>
+  Boolean(
+    document.querySelector('.qiu-menu-flyout-panel:hover') ||
+      document.querySelector('.qiu-route-menu-sub.is-popup > .qiu-route-menu-sub__title:hover') ||
+      document.querySelector('.qiu-route-menu.is-collapse .qiu-route-menu-sub__title:hover') ||
+      document.querySelector('.qiu-route-menu--horizontal .qiu-route-menu-sub__title:hover') ||
+      document.querySelector('.qiu-route-menu-item__tip:hover')
+  )
+
+const enterFlyout = (index: string) => {
+  if (flyoutLeaveTimer) {
+    clearTimeout(flyoutLeaveTimer)
+    flyoutLeaveTimer = null
+  }
+  openSub(index)
+}
+
+const leaveFlyout = () => {
+  if (flyoutLeaveTimer) clearTimeout(flyoutLeaveTimer)
+  // 横向向下展开时鼠标需穿过空隙，延迟略加长
+  const delay = props.mode === 'horizontal' ? 280 : 160
+  flyoutLeaveTimer = setTimeout(() => {
+    if (isFlyoutHovering()) {
+      flyoutLeaveTimer = null
+      return
+    }
+    if (props.collapse || props.mode === 'horizontal') closeAll()
+    flyoutLeaveTimer = null
+  }, delay)
+}
+
+const toggleSub = (index: string) => {
+  if (isSubOpen(index)) closeSub(index)
+  else openSub(index)
+}
+
+const selectItem = (index: string) => {
+  activeIndex.value = index
+}
+
+const isActive = (index: string) => {
+  const active = activeIndex.value
+  return active === index || active.startsWith(`${index}/`)
+}
+
+onBeforeUnmount(() => {
+  if (flyoutLeaveTimer) clearTimeout(flyoutLeaveTimer)
+})
+
+provide<QiuRouteMenuContext>(QIU_ROUTE_MENU_KEY, {
+  mode: modeRef as Ref<'vertical' | 'horizontal'>,
+  collapse: collapseRef as Ref<boolean>,
+  activeIndex: activeIndexRef as Ref<string>,
+  uniqueOpened: uniqueOpenedRef as Ref<boolean>,
+  menuTrigger: menuTriggerRef as Ref<'click' | 'hover'>,
+  isSubOpen,
+  toggleSub,
+  openSub,
+  closeSub,
+  enterFlyout,
+  leaveFlyout,
+  selectItem,
+  isActive,
+})
+
+defineExpose({
+  open: openSub,
+  close: closeSub,
+  closeAll,
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-route-menu {
+  width: 100%;
+  background: var(--qiu-menu-background-color);
+  border: 0;
+
+  &__list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  &--horizontal {
+    .qiu-route-menu__list {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    /* 横向顶栏：避免 icon 容器裁切字形 */
+    :deep(.qiu-route-menu-item__icon-wrap),
+    :deep(.qiu-route-menu-sub__icon-wrap) {
+      overflow: visible;
+    }
+
+    :deep(.qiu-route-menu-item__inner),
+    :deep(.qiu-route-menu-sub__title) {
+      overflow: visible;
+    }
+  }
+
+  &.is-collapse {
+    /* 收起：只留图标；文字/角标进右侧 tips，勿藏图标 wrap */
+    :deep(.qiu-route-menu-item__text),
+    :deep(.qiu-route-menu-item__badge),
+    :deep(.qiu-route-menu-sub__text),
+    :deep(.qiu-route-menu-sub__badge),
+    :deep(.qiu-route-menu-sub__arrow),
+    :deep(.qiu-route-menu-sub__more) {
+      display: none !important;
+    }
+
+    :deep(.qiu-route-menu-item__inner),
+    :deep(.qiu-route-menu-sub__title) {
+      justify-content: center;
+      padding: 0;
+    }
+
+    :deep(.qiu-route-menu-item__icon-wrap),
+    :deep(.qiu-route-menu-sub__icon-wrap) {
+      display: inline-flex !important;
+    }
+
+    :deep(.qiu-route-menu-item__tip) {
+      /* tip 挂在侧栏外，保证不被 overflow 裁切 */
+      position: fixed;
+      /* left/top 由 JS 更稳，这里用 absolute 相对 li；侧栏需 overflow visible */
+    }
+  }
+}
+</style>