foucui 1.0.1

package/components/QiuMenuNav/QiuMenuNavSub.vue

@@ -0,0 +1,120 @@
+<template>
+  <li
+    class="qiu-menu-nav-sub"
+    :class="{
+      'is-open': isOpen,
+      'is-active': isActive,
+    }"
+    role="none"
+  >
+    <div class="qiu-menu-nav-sub__title" @click="toggle">
+      <slot name="icon" />
+      <span class="qiu-menu-nav-sub__text">
+        <slot name="title">{{ title }}</slot>
+      </span>
+      <span class="qiu-menu-nav-sub__arrow" :class="{ 'is-open': isOpen }">▾</span>
+    </div>
+    <ul v-show="isOpen && !menuCtx?.collapse.value" class="qiu-menu-nav-sub__list">
+      <slot />
+    </ul>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import type { QiuMenuNavContext } from './context'
+import { QIU_MENU_NAV_KEY } from './context'
+
+defineOptions({ name: 'QiuMenuNavSub' })
+
+const props = withDefaults(
+  defineProps<{
+    index: string
+    title?: string
+  }>(),
+  {
+    title: '',
+  }
+)
+
+const menuCtx = inject<QiuMenuNavContext>(QIU_MENU_NAV_KEY, null)
+
+const isOpen = computed(() => menuCtx?.isSubOpen(props.index) ?? false)
+
+const isActive = computed(() => {
+  const active = menuCtx?.activeIndex.value ?? ''
+  return active === props.index || active.startsWith(`${props.index}/`)
+})
+
+const toggle = () => {
+  menuCtx?.toggleSub(props.index)
+}
+</script>
+
+<style lang="scss" scoped>
+.qiu-menu-nav-sub {
+  list-style: none;
+
+  &__title {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    height: var(--qiu-menu-item-height, var(--qiu-menu-item-height, 56px));
+    padding: 0 20px;
+    color: var(--qiu-menu-text-color, var(--qiu-menu-text-color, #303133));
+    cursor: pointer;
+    transition: background 0.2s ease, color 0.2s ease;
+
+    &:hover {
+      background: var(--qiu-menu-hover-bg-color, var(--qiu-menu-hover-bg-color, #ecf5ff));
+    }
+  }
+
+  &.is-active > &__title {
+    color: var(--qiu-menu-active-color, var(--qiu-menu-active-color, var(--qiu-color-primary, var(--qiu-color-primary))));
+  }
+
+  &__text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__arrow {
+    flex-shrink: 0;
+    font-size: 12px;
+    transition: transform 0.2s ease;
+
+    &.is-open {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__list {
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    background: var(--qiu-menu-bg-color, var(--qiu-menu-bg-color, #fff));
+
+    :deep(.qiu-menu-nav-item__inner) {
+      padding-left: 40px;
+    }
+
+    :deep(.qiu-menu-nav-sub > .qiu-menu-nav-sub__title) {
+      padding-left: 40px;
+    }
+
+    :deep(.qiu-menu-nav-sub__list .qiu-menu-nav-item__inner) {
+      padding-left: 60px;
+    }
+
+    :deep(.qiu-menu-nav-sub__list .qiu-menu-nav-sub > .qiu-menu-nav-sub__title) {
+      padding-left: 60px;
+    }
+
+    :deep(.qiu-menu-nav-sub__list .qiu-menu-nav-sub__list .qiu-menu-nav-item__inner) {
+      padding-left: 80px;
+    }
+  }
+}
+</style>

package/components/QiuMenuNav/context.ts

@@ -0,0 +1,14 @@
+import type { InjectionKey, Ref } from 'vue'
+
+export interface QiuMenuNavContext {
+  mode: Ref<'vertical' | 'horizontal'>
+  collapse: Ref<boolean>
+  defaultActive: Ref<string>
+  activeIndex: Ref<string>
+  router: Ref<boolean>
+  selectItem: (index: string) => void
+  isSubOpen: (index: string) => boolean
+  toggleSub: (index: string) => void
+}
+
+export const QIU_MENU_NAV_KEY: InjectionKey<QiuMenuNavContext> = Symbol('QiuMenuNav')

package/components/QiuMenuNav/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <nav
+    class="qiu-menu-nav"
+    :class="[
+      `qiu-menu-nav--${mode}`,
+      {
+        'is-collapse': collapse,
+        'is-horizontal': mode === 'horizontal',
+      },
+    ]"
+    role="menu"
+  >
+    <ul class="qiu-menu-nav__list">
+      <slot />
+    </ul>
+  </nav>
+</template>
+
+<script lang="ts" setup>
+import type { QiuMenuNavContext } from './context'
+import { QIU_MENU_NAV_KEY } from './context'
+
+defineOptions({ name: 'QiuMenuNav' })
+
+const props = withDefaults(
+  defineProps<{
+    mode?: 'vertical' | 'horizontal'
+    defaultActive?: string
+    /** 默认展开的 submenu index */
+    defaultOpeneds?: string[]
+    collapse?: boolean
+    router?: boolean
+  }>(),
+  {
+    mode: 'vertical',
+    defaultActive: '',
+    defaultOpeneds: () => [],
+    collapse: false,
+    router: false,
+  }
+)
+
+const emit = defineEmits<{
+  select: [index: string]
+}>()
+
+const activeIndex = ref(props.defaultActive)
+const openSubs = ref<Set<string>>(new Set(props.defaultOpeneds))
+
+watch(
+  () => props.defaultActive,
+  (val) => {
+    if (val) activeIndex.value = val
+  }
+)
+
+watch(
+  () => props.defaultOpeneds,
+  (val) => {
+    openSubs.value = new Set(val || [])
+  }
+)
+
+const modeRef = computed(() => props.mode)
+const collapseRef = computed(() => props.collapse)
+const defaultActiveRef = computed(() => props.defaultActive)
+const activeIndexRef = computed(() => activeIndex.value)
+const routerRef = computed(() => props.router)
+
+const isSubOpen = (index: string) => openSubs.value.has(index)
+
+const toggleSub = (index: string) => {
+  const next = new Set(openSubs.value)
+  if (next.has(index)) next.delete(index)
+  else next.add(index)
+  openSubs.value = next
+}
+
+const selectItem = (index: string) => {
+  activeIndex.value = index
+  emit('select', index)
+}
+
+provide<QiuMenuNavContext>(QIU_MENU_NAV_KEY, {
+  mode: modeRef as Ref<'vertical' | 'horizontal'>,
+  collapse: collapseRef as Ref<boolean>,
+  defaultActive: defaultActiveRef as Ref<string>,
+  activeIndex: activeIndexRef as Ref<string>,
+  router: routerRef as Ref<boolean>,
+  selectItem,
+  isSubOpen,
+  toggleSub,
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-menu-nav {
+  --qiu-menu-bg: var(--qiu-menu-bg-color, var(--qiu-menu-bg-color, #fff));
+  --qiu-menu-border: var(--qiu-menu-border-color, var(--qiu-menu-border-color, #e6e6e6));
+
+  width: 100%;
+  background: var(--qiu-menu-bg);
+  border-right: 1px solid var(--qiu-menu-border);
+
+  &__list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  &--horizontal {
+    border-right: 0;
+    border-bottom: 1px solid var(--qiu-menu-border);
+
+    .qiu-menu-nav__list {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    :deep(.qiu-menu-nav-sub__list) {
+      position: absolute;
+      z-index: 100;
+      min-width: 180px;
+      border: 1px solid var(--qiu-menu-border);
+      border-radius: var(--qiu-border-radius-base, var(--qiu-border-radius-base, 4px));
+      box-shadow: var(--qiu-box-shadow-light, var(--qiu-box-shadow-light, 0 4px 12px rgb(0 0 0 / 10%)));
+    }
+
+    :deep(.qiu-menu-nav-sub) {
+      position: relative;
+    }
+  }
+
+  &.is-collapse {
+    :deep(.qiu-menu-nav-item__title),
+    :deep(.qiu-menu-nav-sub__text),
+    :deep(.qiu-menu-nav-sub__arrow) {
+      display: none;
+    }
+
+    :deep(.qiu-menu-nav-item__inner),
+    :deep(.qiu-menu-nav-sub__title) {
+      justify-content: center;
+      padding: 0;
+    }
+  }
+}
+</style>

package/components/QiuMsg/QiuMsgItem.vue

@@ -0,0 +1,180 @@
+<template>
+  <transition name="qiu-msg-fade">
+    <div v-show="visible" class="qiu-msg" :class="[`qiu-msg--${type}`, `qiu-msg--${position}`]">
+      <i class="qiu-msg__icon" :class="iconClass" />
+      <div class="qiu-msg__content">
+        <span v-if="typeof message === 'string'">{{ message }}</span>
+        <component :is="message" v-else />
+      </div>
+      <i v-if="showClose" class="qiu-msg__close ri-close-line" @click="$emit('close')" />
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import type { QiuMsgPosition, QiuMsgType } from './types'
+
+defineOptions({ name: 'QiuMsgItem' })
+
+const props = defineProps<{
+  id: string
+  type: QiuMsgType
+  position: QiuMsgPosition
+  message: any
+  showClose: boolean
+  visible: boolean
+}>()
+
+defineEmits<{ close: [] }>()
+
+const iconClass = computed(() => {
+  const map: Record<QiuMsgType, string> = {
+    success: 'ri-checkbox-circle-line',
+    warning: 'ri-alert-line',
+    info: 'ri-information-line',
+    error: 'ri-close-circle-line',
+  }
+  return map[props.type]
+})
+</script>
+
+<style lang="scss">
+.qiu-msg-host {
+  position: fixed;
+  z-index: 5000;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  pointer-events: none;
+
+  &--center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    align-items: center;
+  }
+
+  &--left-top {
+    top: var(--qiu-msg-offset, 20px);
+    left: var(--qiu-msg-offset, 20px);
+    align-items: flex-start;
+  }
+
+  &--left-center {
+    top: 50%;
+    left: var(--qiu-msg-offset, 20px);
+    transform: translateY(-50%);
+    align-items: flex-start;
+  }
+
+  &--left-bottom {
+    bottom: var(--qiu-msg-offset, 20px);
+    left: var(--qiu-msg-offset, 20px);
+    align-items: flex-start;
+  }
+
+  &--top-center {
+    top: var(--qiu-msg-offset, 20px);
+    left: 50%;
+    transform: translateX(-50%);
+    align-items: center;
+  }
+
+  &--bottom-center {
+    bottom: var(--qiu-msg-offset, 20px);
+    left: 50%;
+    transform: translateX(-50%);
+    align-items: center;
+  }
+
+  &--right-top {
+    top: var(--qiu-msg-offset, 20px);
+    right: var(--qiu-msg-offset, 20px);
+    align-items: flex-end;
+  }
+
+  &--right-center {
+    top: 50%;
+    right: var(--qiu-msg-offset, 20px);
+    transform: translateY(-50%);
+    align-items: flex-end;
+  }
+
+  &--right-bottom {
+    right: var(--qiu-msg-offset, 20px);
+    bottom: var(--qiu-msg-offset, 20px);
+    align-items: flex-end;
+  }
+}
+
+.qiu-msg-wrap {
+  pointer-events: auto;
+}
+
+.qiu-msg {
+  display: inline-flex;
+  align-items: flex-start;
+  min-width: 220px;
+  max-width: min(480px, 90vw);
+  padding: 12px 14px;
+  background: var(--qiu-bg-color-overlay, #fff);
+  border: 1px solid var(--qiu-border-color-light);
+  border-radius: var(--qiu-border-radius-base);
+  box-shadow: var(--qiu-box-shadow-light);
+
+  &__icon {
+    margin-right: 8px;
+    font-size: 18px;
+    line-height: 1.4;
+  }
+
+  &__content {
+    flex: 1;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--qiu-text-color-primary);
+    word-break: break-word;
+  }
+
+  &__close {
+    margin-left: 8px;
+    font-size: 16px;
+    color: var(--qiu-text-color-secondary);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--qiu-text-color-primary);
+    }
+  }
+
+  &--success .qiu-msg__icon {
+    color: var(--qiu-color-success);
+  }
+
+  &--warning .qiu-msg__icon {
+    color: var(--qiu-color-warning);
+  }
+
+  &--info .qiu-msg__icon {
+    color: var(--qiu-color-info);
+  }
+
+  &--error .qiu-msg__icon {
+    color: var(--qiu-color-danger);
+  }
+}
+
+.qiu-msg-fade-enter-active,
+.qiu-msg-fade-leave-active {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+
+.qiu-msg-fade-enter-from,
+.qiu-msg-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+</style>

package/components/QiuMsg/index.ts

@@ -0,0 +1,158 @@
+/**
+ * QiuMsg — 多位置、可叠加的消息提示
+ */
+import { createApp, h, ref, type App } from 'vue'
+import QiuMsgItem from './QiuMsgItem.vue'
+import type { QiuMsgOptions, QiuMsgPosition, QiuMsgType } from './types'
+
+export type { QiuMsgOptions, QiuMsgPosition, QiuMsgType } from './types'
+
+interface MsgRecord {
+  id: string
+  app: App
+  el: HTMLElement
+  position: QiuMsgPosition
+  timer?: ReturnType<typeof setTimeout>
+}
+
+const stacks: Record<QiuMsgPosition, MsgRecord[]> = {
+  center: [],
+  'left-top': [],
+  'left-center': [],
+  'left-bottom': [],
+  'top-center': [],
+  'bottom-center': [],
+  'right-top': [],
+  'right-center': [],
+  'right-bottom': [],
+}
+
+let seed = 0
+
+const ensureHost = (position: QiuMsgPosition, offset = 20) => {
+  const id = `qiu-msg-host-${position}`
+  let host = document.getElementById(id)
+  if (!host) {
+    host = document.createElement('div')
+    host.id = id
+    host.className = `qiu-msg-host qiu-msg-host--${position}`
+    document.body.appendChild(host)
+  }
+  host.style.setProperty('--qiu-msg-offset', `${offset}px`)
+  return host
+}
+
+const layoutStack = (position: QiuMsgPosition) => {
+  stacks[position].forEach((item, index) => {
+    item.el.style.setProperty('--qiu-msg-index', String(index))
+  })
+}
+
+const closeById = (id: string) => {
+  ;(Object.keys(stacks) as QiuMsgPosition[]).forEach((pos) => {
+    const idx = stacks[pos].findIndex((x) => x.id === id)
+    if (idx >= 0) {
+      const [rec] = stacks[pos].splice(idx, 1)
+      if (rec.timer) clearTimeout(rec.timer)
+      rec.app.unmount()
+      rec.el.remove()
+      layoutStack(pos)
+    }
+  })
+}
+
+const closeAll = (position?: QiuMsgPosition) => {
+  const positions = position ? [position] : (Object.keys(stacks) as QiuMsgPosition[])
+  positions.forEach((pos) => {
+    ;[...stacks[pos]].forEach((rec) => closeById(rec.id))
+  })
+}
+
+export const qiuMsg = Object.assign(
+  (options: QiuMsgOptions | string) => {
+    const opts: QiuMsgOptions = typeof options === 'string' ? { message: options } : { ...options }
+    const position = opts.position || 'center'
+    const type = opts.type || 'info'
+    const duration = opts.duration ?? 3000
+    const id = opts.id || `qiu-msg-${++seed}`
+    const offset = opts.offset ?? 20
+
+    closeById(id)
+
+    const host = ensureHost(position, offset)
+    const el = document.createElement('div')
+    el.className = 'qiu-msg-wrap'
+    host.appendChild(el)
+
+    const visible = ref(true)
+    const rec: MsgRecord = { id, app: null as unknown as App, el, position }
+
+    const handleClose = () => {
+      if (rec.timer) {
+        clearTimeout(rec.timer)
+        rec.timer = undefined
+      }
+      visible.value = false
+      setTimeout(() => {
+        closeById(id)
+        opts.onClose?.()
+      }, 200)
+    }
+
+    const app = createApp({
+      setup() {
+        return () =>
+          h(QiuMsgItem, {
+            id,
+            type,
+            position,
+            message: opts.message,
+            showClose: opts.showClose ?? true,
+            visible: visible.value,
+            onClose: handleClose,
+          })
+      },
+    })
+
+    if (duration > 0) {
+      rec.timer = setTimeout(handleClose, duration)
+    }
+
+    app.mount(el)
+    rec.app = app
+    stacks[position].push(rec)
+    layoutStack(position)
+
+    return { close: () => closeById(id), id }
+  },
+  {
+    success(message: string | QiuMsgOptions, position?: QiuMsgPosition) {
+      return typeof message === 'string' ? qiuMsg({ message, type: 'success', position }) : qiuMsg({ ...message, type: 'success' })
+    },
+    warning(message: string | QiuMsgOptions, position?: QiuMsgPosition) {
+      return typeof message === 'string' ? qiuMsg({ message, type: 'warning', position }) : qiuMsg({ ...message, type: 'warning' })
+    },
+    info(message: string | QiuMsgOptions, position?: QiuMsgPosition) {
+      return typeof message === 'string' ? qiuMsg({ message, type: 'info', position }) : qiuMsg({ ...message, type: 'info' })
+    },
+    error(message: string | QiuMsgOptions, position?: QiuMsgPosition) {
+      return typeof message === 'string' ? qiuMsg({ message, type: 'error', position }) : qiuMsg({ ...message, type: 'error' })
+    },
+    closeAll,
+  }
+) as QiuMsgFn
+
+export default {
+  install(app: App) {
+    app.config.globalProperties.$qiuMsg = qiuMsg
+    app.provide('$qiuMsg', qiuMsg)
+  },
+}
+
+export type QiuMsgFn = ((options: QiuMsgOptions | string) => { close: () => void; id: string }) & {
+  success: (message: string | QiuMsgOptions, position?: QiuMsgPosition) => { close: () => void; id: string }
+  warning: (message: string | QiuMsgOptions, position?: QiuMsgPosition) => { close: () => void; id: string }
+  info: (message: string | QiuMsgOptions, position?: QiuMsgPosition) => { close: () => void; id: string }
+  error: (message: string | QiuMsgOptions, position?: QiuMsgPosition) => { close: () => void; id: string }
+  closeAll: (position?: QiuMsgPosition) => void
+}

package/components/QiuMsg/types.ts

@@ -0,0 +1,23 @@
+export type QiuMsgPosition =
+  | 'center'
+  | 'left-top'
+  | 'left-center'
+  | 'left-bottom'
+  | 'top-center'
+  | 'bottom-center'
+  | 'right-top'
+  | 'right-center'
+  | 'right-bottom'
+
+export type QiuMsgType = 'success' | 'warning' | 'info' | 'error'
+
+export interface QiuMsgOptions {
+  message: string | import('vue').VNode
+  type?: QiuMsgType
+  position?: QiuMsgPosition
+  duration?: number
+  showClose?: boolean
+  offset?: number
+  id?: string
+  onClose?: () => void
+}