foucui 1.0.1

package/components/QiuDrawer/index.vue

@@ -0,0 +1,350 @@
+<template>
+  <Teleport to="body" :disabled="!appendToBody">
+    <Transition :name="transitionName">
+      <div
+        v-if="drawerVisible"
+        class="qiu-drawer-root"
+        :class="[`qiu-drawer-root--${direction}`]"
+        :style="{ zIndex: String(zIndex) }"
+      >
+        <div
+          v-if="modal"
+          class="qiu-drawer__mask"
+          @click="onMaskClick"
+        />
+
+        <div
+          class="qiu-drawer"
+          :class="[
+            `qiu-drawer--${direction}`,
+            { 'qiu-drawer--animated': animated },
+            attrs.class,
+          ]"
+          v-bind="attrsWithoutClass"
+          :style="drawerStyle"
+          role="dialog"
+          aria-modal="true"
+        >
+          <div v-if="showClose || title || $slots.header" class="qiu-drawer__header">
+            <div class="qiu-drawer__title">
+              <slot name="header">{{ title }}</slot>
+            </div>
+            <button
+              v-if="showClose"
+              type="button"
+              class="qiu-drawer__close"
+              aria-label="close"
+              @click="requestClose"
+            >
+              ×
+            </button>
+          </div>
+
+          <div class="qiu-drawer__body">
+            <slot />
+          </div>
+
+          <div v-if="$slots.footer" class="qiu-drawer__footer">
+            <slot name="footer" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { useBodyScrollLock } from '../useBodyScrollLock'
+defineOptions({ name: 'QiuDrawer', inheritAttrs: false })
+
+type Direction = 'rtl' | 'ltr' | 'ttb' | 'btt'
+
+const attrs = useAttrs()
+const attrsWithoutClass = computed(() => {
+  const { class: _c, style: _s, ...rest } = attrs as Record<string, unknown>
+  return rest
+})
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    title?: string
+    direction?: Direction
+    size?: string | number
+    modal?: boolean
+    closeOnClickModal?: boolean
+    closeOnPressEscape?: boolean
+    showClose?: boolean
+    animated?: boolean
+    zIndex?: number
+    /** 兼容 Element 风格；当前始终 Teleport 到 body，false 时禁用 Teleport */
+    appendToBody?: boolean
+    beforeClose?: (done: () => void) => void
+  }>(),
+  {
+    modelValue: false,
+    title: '',
+    direction: 'rtl',
+    size: '30%',
+    modal: true,
+    closeOnClickModal: true,
+    closeOnPressEscape: false,
+    showClose: true,
+    animated: true,
+    zIndex: 2000,
+    appendToBody: true,
+  }
+)
+
+const appendToBody = computed(() => props.appendToBody !== false)
+
+const emit = defineEmits<{
+  'update:modelValue': [boolean]
+  open: []
+  opened: []
+  close: []
+  closed: []
+}>()
+
+const drawerVisible = useVModel(props, 'modelValue', emit)
+
+const resolvedSize = computed(() =>
+  typeof props.size === 'number' ? `${props.size}px` : String(props.size)
+)
+
+const drawerStyle = computed(() => {
+  const size = resolvedSize.value
+  switch (props.direction) {
+    case 'ltr':
+      return { width: size, height: '100%' }
+    case 'ttb':
+      return { width: '100%', height: size }
+    case 'btt':
+      return { width: '100%', height: size }
+    default:
+      return { width: size, height: '100%' }
+  }
+})
+
+const transitionName = computed(() => {
+  switch (props.direction) {
+    case 'ltr':
+      return 'qiu-drawer-slide-left'
+    case 'ttb':
+      return 'qiu-drawer-slide-top'
+    case 'btt':
+      return 'qiu-drawer-slide-bottom'
+    default:
+      return 'qiu-drawer-slide-right'
+  }
+})
+
+const { lock: lockBodyScroll, unlock: unlockBodyScroll } = useBodyScrollLock()
+
+const doClose = () => {
+  emit('close')
+  drawerVisible.value = false
+}
+
+const requestClose = () => {
+  if (props.beforeClose) {
+    props.beforeClose(() => doClose())
+    return
+  }
+  doClose()
+}
+
+const onMaskClick = () => {
+  if (props.closeOnClickModal) requestClose()
+}
+
+const needLock = computed(() => props.modal && drawerVisible.value)
+
+watch(needLock, async (v) => {
+  if (v) {
+    lockBodyScroll()
+    emit('open')
+    await nextTick()
+    emit('opened')
+  } else {
+    unlockBodyScroll()
+    emit('closed')
+  }
+})
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (props.closeOnPressEscape && e.key === 'Escape') requestClose()
+}
+
+watch(drawerVisible, (v) => {
+  if (v) window.addEventListener('keydown', onKeydown)
+  else window.removeEventListener('keydown', onKeydown)
+})
+
+onMounted(() => {
+  if (needLock.value) lockBodyScroll()
+})
+
+onBeforeUnmount(() => {
+  unlockBodyScroll()
+  window.removeEventListener('keydown', onKeydown)
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-drawer-root {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+}
+
+.qiu-drawer__mask {
+  position: absolute;
+  inset: 0;
+  pointer-events: auto;
+  background: var(--qiu-drawer-mask-bg, var(--qiu-overlay-color-lighter, rgba(0, 0, 0, 0.45)));
+}
+
+.qiu-drawer {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  pointer-events: auto;
+  background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
+  box-shadow: var(--qiu-box-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
+  box-sizing: border-box;
+  overflow: hidden;
+
+  &--rtl {
+    top: 0;
+    right: 0;
+  }
+
+  &--ltr {
+    top: 0;
+    left: 0;
+  }
+
+  &--ttb {
+    top: 0;
+    left: 0;
+  }
+
+  &--btt {
+    bottom: 0;
+    left: 0;
+  }
+}
+
+.qiu-drawer__header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
+}
+
+.qiu-drawer__title {
+  flex: 1;
+  min-width: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
+}
+
+.qiu-drawer__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin-left: 8px;
+  padding: 0;
+  font-size: 20px;
+  line-height: 1;
+  color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 4px;
+
+  &:hover {
+    color: var(--qiu-color-primary, var(--qiu-color-primary, #409eff));
+    background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
+  }
+}
+
+.qiu-drawer__body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  padding: 16px 20px;
+  overflow: auto;
+  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
+  font-size: 14px;
+}
+
+.qiu-drawer__footer {
+  flex-shrink: 0;
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  padding: 12px 20px;
+  border-top: 1px solid var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
+}
+
+/* slide transitions */
+.qiu-drawer-slide-right-enter-active,
+.qiu-drawer-slide-right-leave-active,
+.qiu-drawer-slide-left-enter-active,
+.qiu-drawer-slide-left-leave-active,
+.qiu-drawer-slide-top-enter-active,
+.qiu-drawer-slide-top-leave-active,
+.qiu-drawer-slide-bottom-enter-active,
+.qiu-drawer-slide-bottom-leave-active {
+  transition: opacity 0.25s ease;
+
+  .qiu-drawer {
+    transition: transform 0.25s ease;
+  }
+}
+
+.qiu-drawer-slide-right-enter-from,
+.qiu-drawer-slide-right-leave-to {
+  opacity: 0;
+
+  .qiu-drawer {
+    transform: translateX(100%);
+  }
+}
+
+.qiu-drawer-slide-left-enter-from,
+.qiu-drawer-slide-left-leave-to {
+  opacity: 0;
+
+  .qiu-drawer {
+    transform: translateX(-100%);
+  }
+}
+
+.qiu-drawer-slide-top-enter-from,
+.qiu-drawer-slide-top-leave-to {
+  opacity: 0;
+
+  .qiu-drawer {
+    transform: translateY(-100%);
+  }
+}
+
+.qiu-drawer-slide-bottom-enter-from,
+.qiu-drawer-slide-bottom-leave-to {
+  opacity: 0;
+
+  .qiu-drawer {
+    transform: translateY(100%);
+  }
+}
+</style>

package/components/QiuDropdown/QiuDropdownItem.vue

@@ -0,0 +1,74 @@
+<template>
+  <li
+    class="qiu-dropdown-item"
+    :class="{
+      'is-disabled': disabled,
+      'is-divided': divided,
+    }"
+    role="menuitem"
+    @click="onClick"
+  >
+    <slot />
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { QIU_DROPDOWN_KEY } from './context'
+
+defineOptions({ name: 'QiuDropdownItem' })
+
+const props = withDefaults(
+  defineProps<{
+    command?: string | number
+    disabled?: boolean
+    divided?: boolean
+  }>(),
+  {
+    command: '',
+    disabled: false,
+    divided: false,
+  }
+)
+
+const emit = defineEmits<{
+  click: [MouseEvent]
+}>()
+
+const dropdown = inject(QIU_DROPDOWN_KEY, null)
+
+const onClick = (e: MouseEvent) => {
+  if (props.disabled) return
+  emit('click', e)
+  dropdown?.emitCommand(props.command)
+}
+</script>
+
+<style lang="scss" scoped>
+.qiu-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.15s ease, color 0.15s ease;
+
+  &:hover:not(.is-disabled) {
+    color: var(--qiu-color-primary, var(--qiu-color-primary, #409eff));
+    background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
+  }
+
+  &.is-disabled {
+    color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
+    cursor: not-allowed;
+  }
+
+  &.is-divided {
+    margin-top: 4px;
+    border-top: 1px solid var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
+  }
+}
+</style>

package/components/QiuDropdown/QiuDropdownMenu.vue

@@ -0,0 +1,22 @@
+<template>
+  <ul class="qiu-dropdown-menu" role="menu">
+    <slot />
+  </ul>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuDropdownMenu' })
+</script>
+
+<style lang="scss" scoped>
+.qiu-dropdown-menu {
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+  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;
+}
+</style>

package/components/QiuDropdown/context.ts

@@ -0,0 +1,9 @@
+import type { InjectionKey, Ref } from 'vue'
+
+export interface QiuDropdownContext {
+  visible: Ref<boolean>
+  close: () => void
+  emitCommand: (command: string | number) => void
+}
+
+export const QIU_DROPDOWN_KEY: InjectionKey<QiuDropdownContext> = Symbol('QiuDropdown')

package/components/QiuDropdown/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <span ref="triggerRef" class="qiu-dropdown">
+    <span class="qiu-dropdown__trigger" @click.stop="toggle">
+      <slot />
+    </span>
+
+    <Teleport to="body">
+      <Transition name="qiu-dropdown-fade">
+        <div
+          v-if="visible"
+          ref="menuHostRef"
+          class="qiu-dropdown__popper"
+          :class="popperClass"
+          :style="popperStyle"
+          @click.stop
+        >
+          <slot name="dropdown" />
+        </div>
+      </Transition>
+    </Teleport>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { QIU_DROPDOWN_KEY } from './context'
+
+defineOptions({ name: 'QiuDropdown' })
+
+const props = withDefaults(
+  defineProps<{
+    /** 禁用下拉 */
+    disabled?: boolean
+    /** 弹出位置 */
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'bottom' | 'top'
+    /** 附加到弹层的 class */
+    popperClass?: string
+  }>(),
+  {
+    disabled: false,
+    placement: 'bottom-start',
+    popperClass: '',
+  }
+)
+
+const emit = defineEmits<{
+  command: [string | number]
+  visibleChange: [boolean]
+}>()
+
+const triggerRef = ref<HTMLElement | null>(null)
+const menuHostRef = ref<HTMLElement | null>(null)
+const visible = ref(false)
+const popperStyle = ref<Record<string, string>>({
+  position: 'fixed',
+  top: '-9999px',
+  left: '-9999px',
+  zIndex: '3000',
+})
+
+const close = () => {
+  if (!visible.value) return
+  visible.value = false
+  emit('visibleChange', false)
+}
+
+const open = async () => {
+  if (props.disabled) return
+  visible.value = true
+  emit('visibleChange', true)
+  await nextTick()
+  updatePosition()
+  // 再测一次：内容渲染后尺寸更准（尤其是 tabs more 面板）
+  requestAnimationFrame(() => updatePosition())
+}
+
+const toggle = () => {
+  if (props.disabled) return
+  if (visible.value) close()
+  else open()
+}
+
+const emitCommand = (command: string | number) => {
+  emit('command', command)
+  close()
+}
+
+provide(QIU_DROPDOWN_KEY, { visible, close, emitCommand })
+
+const updatePosition = () => {
+  const trigger = triggerRef.value
+  const menu = menuHostRef.value
+  if (!trigger || !menu) return
+
+  const rect = trigger.getBoundingClientRect()
+  const menuRect = menu.getBoundingClientRect()
+  const gap = 4
+  const vw = window.innerWidth
+  const vh = window.innerHeight
+  const place = props.placement
+
+  let top = place.startsWith('top') ? rect.top - menuRect.height - gap : rect.bottom + gap
+  let left = rect.left
+
+  if (place.endsWith('end')) {
+    left = rect.right - menuRect.width
+  } else if (place === 'bottom' || place === 'top') {
+    left = rect.left + (rect.width - menuRect.width) / 2
+  }
+
+  if (left + menuRect.width > vw - 4) left = vw - menuRect.width - 4
+  if (left < 4) left = 4
+  if (top + menuRect.height > vh - 4) top = rect.top - menuRect.height - gap
+  if (top < 4) top = 4
+
+  popperStyle.value = {
+    position: 'fixed',
+    top: `${Math.round(top)}px`,
+    left: `${Math.round(left)}px`,
+    zIndex: '3000',
+  }
+}
+
+const onDocClick = (e: MouseEvent) => {
+  if (!visible.value) return
+  const t = e.target as Node
+  if (triggerRef.value?.contains(t) || menuHostRef.value?.contains(t)) return
+  close()
+}
+
+const onScrollOrResize = () => {
+  if (visible.value) updatePosition()
+}
+
+watch(visible, (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(() => {
+  document.removeEventListener('click', onDocClick, true)
+  window.removeEventListener('scroll', onScrollOrResize, true)
+  window.removeEventListener('resize', onScrollOrResize)
+})
+
+defineExpose({ open, close, toggle })
+</script>
+
+<style lang="scss" scoped>
+.qiu-dropdown {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}
+
+.qiu-dropdown__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.qiu-dropdown__popper {
+  position: fixed;
+  z-index: 3000;
+  min-width: 120px;
+  pointer-events: auto;
+}
+
+.qiu-dropdown-fade-enter-active,
+.qiu-dropdown-fade-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.qiu-dropdown-fade-enter-from,
+.qiu-dropdown-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>

package/components/QiuEmpty/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="qiu-empty">
+    <div class="qiu-empty__image">
+      <slot name="image">
+        <svg
+          class="qiu-empty__svg"
+          viewBox="0 0 120 80"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+        >
+          <rect x="10" y="20" width="100" height="50" rx="4" fill="var(--qiu-fill-color, var(--qiu-fill-color, #f0f2f5))" />
+          <rect x="20" y="30" width="40" height="6" rx="2" fill="var(--qiu-border-color, var(--qiu-border-color, #dcdfe6))" />
+          <rect x="20" y="42" width="60" height="6" rx="2" fill="var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5))" />
+          <rect x="20" y="54" width="30" height="6" rx="2" fill="var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5))" />
+        </svg>
+      </slot>
+    </div>
+    <p v-if="description || $slots.description" class="qiu-empty__description">
+      <slot name="description">{{ description }}</slot>
+    </p>
+    <div v-if="$slots.default" class="qiu-empty__actions">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuEmpty' })
+
+withDefaults(
+  defineProps<{
+    description?: string
+  }>(),
+  {
+    description: '暂无数据',
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.qiu-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+  text-align: center;
+}
+
+.qiu-empty__image {
+  margin-bottom: 16px;
+}
+
+.qiu-empty__svg {
+  width: 120px;
+  height: 80px;
+}
+
+.qiu-empty__description {
+  margin: 0 0 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
+}
+
+.qiu-empty__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+}
+</style>