foucui 1.0.1 → 2.0.0

package/components/QiuDialog/index.vue

@@ -1,828 +0,0 @@
-<template>
-  <Teleport :to="teleportTo" :disabled="!appendToBody">
-    <div
-      v-if="!props.destroyOnClose || contentAlive || dialogVisible"
-      v-show="dialogVisible"
-      class="qiu-dialog-root"
-      :class="[rootClass, attrs.class]"
-      v-bind="attrsWithoutClass"
-      :style="{ zIndex: props.zIndex }"
-    >
-      <div
-        v-if="modal && !isMinimized"
-        class="qiu-dialog__mask"
-        :class="modalClass"
-        @mousedown.self="onMaskMouseDown"
-      />
-
-      <div
-        ref="panelRef"
-        class="qiu-dialog"
-        :class="panelClass"
-        :style="panelStyle"
-        role="dialog"
-        aria-modal="true"
-        @mousedown="bringToFront"
-      >
-        <div
-          class="qiu-dialog__header"
-          :class="{ 'is-movable': canDrag, 'is-minimized-bar': isMinimized }"
-          @mousedown="onHeaderMouseDown"
-          @dblclick="onHeaderDblClick"
-          @click="onMinimizedBarClick"
-        >
-          <div class="qiu-dialog__title">{{ title }}</div>
-          <div class="qiu-dialog__actions" @mousedown.stop @click.stop>
-            <button
-              v-if="canMinimize && !isMinimized"
-              type="button"
-              class="qiu-dialog__btn"
-              :title="translate('最小化')"
-              @click.stop="minimize"
-            >
-              <qiu-icon icon="subtract-line" />
-            </button>
-            <button
-              v-if="canMaximize"
-              type="button"
-              class="qiu-dialog__btn"
-              :title="translate(isMinimized || isFullscreen ? '还原' : '最大化')"
-              @click.stop="isMinimized ? restoreFromMinimize() : toggleMaximize()"
-            >
-              <qiu-icon
-                :icon="
-                  isMinimized
-                    ? 'picture-in-picture-2-line'
-                    : isFullscreen
-                      ? 'fullscreen-exit-line'
-                      : 'fullscreen-line'
-                "
-              />
-            </button>
-            <button
-              v-if="showClose"
-              type="button"
-              class="qiu-dialog__btn"
-              :title="translate('关闭')"
-              @click.stop="requestClose"
-            >
-              <qiu-icon icon="close-line" />
-            </button>
-          </div>
-        </div>
-
-        <div
-          v-show="!isMinimized"
-          class="qiu-dialog__body"
-          :class="{ 'is-loading': loading }"
-        >
-          <div v-if="loading" class="qiu-dialog__loading">
-            <span class="qiu-dialog__spinner" />
-            <span v-if="loadingText" class="qiu-dialog__loading-text">{{ loadingText }}</span>
-          </div>
-          <slot />
-        </div>
-
-        <div v-if="!isMinimized && $slots.footer" class="qiu-dialog__footer">
-          <slot name="footer" />
-        </div>
-
-        <!-- 拉伸条放在面板外侧，不覆盖 body 滚动条 -->
-        <template v-if="resizable && !isFullscreen && !isMinimized">
-          <div
-            v-for="dir in resizeDirs"
-            :key="dir"
-            class="qiu-dialog__resize"
-            :class="`qiu-dialog__resize--${dir}`"
-            @mousedown.prevent.stop="startResize($event, dir)"
-          />
-        </template>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import { translate } from '../../src/i18n'
-import { useBodyScrollLock } from '../useBodyScrollLock'
-
-defineOptions({ name: 'QiuDialog', inheritAttrs: false })
-
-type ResizeDir = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw'
-type Box = { left: number; top: number; width: number; height: number }
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: boolean
-    title?: string
-    width?: string | number
-    top?: string
-    /** 打开时垂直水平居中；false 时用 top */
-    alignCenter?: boolean
-    modal?: boolean
-    modalClass?: string
-    appendToBody?: boolean
-    appendTo?: string | HTMLElement
-    lockScroll?: boolean
-    closeOnClickModal?: boolean
-    closeOnPressEscape?: boolean
-    destroyOnClose?: boolean
-    beforeClose?: (done: () => void) => void
-    showFullscreen?: boolean
-    showMinimize?: boolean
-    /** 别名：优先于 showFullscreen */
-    maximizable?: boolean
-    /** 别名：优先于 showMinimize */
-    minimizable?: boolean
-    showClose?: boolean
-    fullscreen?: boolean
-    loading?: boolean
-    loadingText?: string
-    animated?: boolean
-    theme?: string
-    draggable?: boolean
-    /**
-     * 拖拽边界：
-     * - viewport / true：限制在可视窗口内（默认）
-     * - none / false：可拖出可视窗口外
-     */
-    dragBound?: boolean | 'viewport' | 'none'
-    resizable?: boolean
-    openInTab?: boolean
-    minWidth?: number
-    minHeight?: number
-    zIndex?: number
-  }>(),
-  {
-    modelValue: false,
-    title: '',
-    width: '520px',
-    top: '15vh',
-    alignCenter: true,
-    modal: true,
-    modalClass: '',
-    appendToBody: true,
-    lockScroll: true,
-    closeOnClickModal: false,
-    closeOnPressEscape: false,
-    destroyOnClose: false,
-    showFullscreen: true,
-    showMinimize: true,
-    maximizable: undefined,
-    minimizable: undefined,
-    showClose: true,
-    fullscreen: false,
-    loading: false,
-    animated: true,
-    theme: 'default',
-    draggable: true,
-    dragBound: 'viewport',
-    resizable: true,
-    openInTab: false,
-    minWidth: 320,
-    minHeight: 180,
-    zIndex: 2000,
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [boolean]
-  open: []
-  opened: []
-  close: []
-  closed: []
-  minimize: []
-  maximize: []
-  restore: []
-}>()
-
-const attrs = useAttrs()
-const attrsWithoutClass = computed(() => {
-  const { class: _c, style: _s, ...rest } = attrs as Record<string, unknown>
-  return rest
-})
-
-const dialogVisible = useVModel(props, 'modelValue', emit)
-const panelRef = ref<HTMLElement | null>(null)
-const isFullscreen = ref(false)
-const isMinimized = ref(false)
-const box = ref<Box | null>(null)
-const restoreBox = ref<Box | null>(null)
-const dragging = ref(false)
-const resizing = ref(false)
-const closing = ref(false)
-const zBoost = ref(0)
-const contentAlive = ref(true)
-
-const resizeDirs: ResizeDir[] = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw']
-
-const teleportTo = computed(() => {
-  if (typeof props.appendTo === 'string') return props.appendTo
-  if (props.appendTo instanceof HTMLElement) return props.appendTo
-  return 'body'
-})
-const appendToBody = computed(() => props.appendToBody !== false)
-
-const canMaximize = computed(() => props.maximizable ?? props.showFullscreen)
-const canMinimize = computed(() => props.minimizable ?? props.showMinimize)
-const canDrag = computed(() => props.draggable && !isFullscreen.value && !isMinimized.value)
-const interacted = computed(() => !!box.value)
-/** 是否限制拖拽在可视窗口内 */
-const isViewportBound = computed(() => {
-  const v = props.dragBound
-  return v === true || v === 'viewport' || v === undefined
-})
-
-const rootClass = computed(() => ({
-  'is-open-in-tab': props.openInTab,
-  'is-minimized-root': isMinimized.value,
-}))
-
-const panelClass = computed(() => ({
-  [`qiu-dialog--${props.theme}`]: true,
-  'qiu-dialog--minimized': isMinimized.value,
-  'qiu-dialog--fullscreen': isFullscreen.value,
-  'qiu-dialog--centered': !interacted.value && !isFullscreen.value && !isMinimized.value && props.alignCenter,
-  'qiu-dialog--topped': !interacted.value && !isFullscreen.value && !isMinimized.value && !props.alignCenter,
-  'qiu-dialog--fixed-box': interacted.value && !isFullscreen.value && !isMinimized.value,
-  'qiu-dialog--unbounded': !isViewportBound.value && interacted.value && !isFullscreen.value && !isMinimized.value,
-  'qiu-dialog--dragging': dragging.value,
-  'qiu-dialog--resizing': resizing.value,
-  'qiu-dialog--animated': props.animated && !dragging.value && !resizing.value && !closing.value,
-}))
-
-const panelStyle = computed(() => {
-  const style: Record<string, string> = {
-    zIndex: String(props.zIndex + zBoost.value + (isMinimized.value ? 100 : 0)),
-  }
-
-  if (isMinimized.value) {
-    Object.assign(style, {
-      left: '16px',
-      bottom: '16px',
-      top: 'auto',
-      width: '240px',
-      height: '48px',
-      transform: 'none',
-    })
-    return style
-  }
-
-  if (isFullscreen.value) {
-    Object.assign(style, {
-      left: '0',
-      top: '0',
-      width: '100vw',
-      height: '100vh',
-      transform: 'none',
-      borderRadius: '0',
-    })
-    return style
-  }
-
-  if (box.value) {
-    Object.assign(style, {
-      left: `${box.value.left}px`,
-      top: `${box.value.top}px`,
-      width: `${box.value.width}px`,
-      height: `${box.value.height}px`,
-      transform: 'none',
-    })
-    return style
-  }
-
-  // 未交互：居中或 top 定位
-  style.width = typeof props.width === 'number' ? `${props.width}px` : String(props.width || '520px')
-  if (!props.alignCenter) {
-    style.top = props.top || '15vh'
-    style.left = '50%'
-    style.transform = 'translateX(-50%)'
-  }
-  return style
-})
-
-const clampBox = (next: Box, mode: 'drag' | 'resize' = 'resize'): Box => {
-  const vw = window.innerWidth
-  const vh = window.innerHeight
-  const width = Math.max(props.minWidth, next.width)
-  const height = Math.max(props.minHeight, next.height)
-
-  // 允许拖出可视区：位置不限制；拉伸仍保证最小尺寸
-  if (!isViewportBound.value) {
-    return {
-      left: next.left,
-      top: next.top,
-      width: mode === 'resize' ? width : Math.max(props.minWidth, next.width),
-      height: mode === 'resize' ? height : Math.max(props.minHeight, next.height),
-    }
-  }
-
-  // 可视窗口内：位置与尺寸都限制在窗口内
-  const maxW = Math.max(props.minWidth, vw - 8)
-  const maxH = Math.max(props.minHeight, vh - 8)
-  const w = Math.min(width, maxW)
-  const h = Math.min(height, maxH)
-  const left = Math.min(Math.max(0, next.left), Math.max(0, vw - w))
-  const top = Math.min(Math.max(0, next.top), Math.max(0, vh - h))
-  return { left, top, width: w, height: h }
-}
-
-/** 从当前 DOM 量出像素盒（首次拖拽/拉伸时调用） */
-const captureBox = () => {
-  const el = panelRef.value
-  if (!el) return null
-  const rect = el.getBoundingClientRect()
-  const next = clampBox({
-    left: rect.left,
-    top: rect.top,
-    width: rect.width,
-    height: Math.max(rect.height, props.minHeight),
-  })
-  box.value = next
-  return next
-}
-
-const ensureBox = () => box.value || captureBox()
-
-const { lock: lockScroll, unlock: unlockScroll } = useBodyScrollLock()
-const lockBodyScroll = (lock: boolean) => {
-  if (!props.lockScroll) return
-  if (lock) lockScroll()
-  else unlockScroll()
-}
-
-const doClose = () => {
-  closing.value = true
-  emit('close')
-  dialogVisible.value = false
-}
-
-const requestClose = () => {
-  if (props.beforeClose) {
-    props.beforeClose(() => doClose())
-    return
-  }
-  doClose()
-}
-
-const onMaskMouseDown = () => {
-  if (props.closeOnClickModal) requestClose()
-}
-
-const bringToFront = () => {
-  zBoost.value += 1
-}
-
-const toggleMaximize = () => {
-  if (isMinimized.value) {
-    restoreFromMinimize()
-    return
-  }
-  if (!isFullscreen.value) {
-    ensureBox()
-    if (box.value) restoreBox.value = { ...box.value }
-    isFullscreen.value = true
-    emit('maximize')
-  } else {
-    isFullscreen.value = false
-    if (restoreBox.value) box.value = { ...restoreBox.value }
-    emit('restore')
-  }
-}
-
-const minimize = () => {
-  if (isFullscreen.value) isFullscreen.value = false
-  ensureBox()
-  if (box.value) restoreBox.value = { ...box.value }
-  isMinimized.value = true
-  emit('minimize')
-}
-
-const restoreFromMinimize = () => {
-  isMinimized.value = false
-  if (restoreBox.value) box.value = { ...restoreBox.value }
-  emit('restore')
-}
-
-const onMinimizedBarClick = () => {
-  if (isMinimized.value) restoreFromMinimize()
-}
-
-const onHeaderDblClick = () => {
-  if (isMinimized.value) restoreFromMinimize()
-  else toggleMaximize()
-}
-
-const onHeaderMouseDown = (e: MouseEvent) => {
-  if (!canDrag.value) return
-  if ((e.target as HTMLElement).closest('.qiu-dialog__actions')) return
-  e.preventDefault()
-  const origin = ensureBox()
-  if (!origin) return
-
-  dragging.value = true
-  const startX = e.clientX
-  const startY = e.clientY
-
-  const onMove = (ev: MouseEvent) => {
-    box.value = clampBox(
-      {
-        ...origin,
-        left: origin.left + ev.clientX - startX,
-        top: origin.top + ev.clientY - startY,
-      },
-      'drag'
-    )
-  }
-  const onUp = () => {
-    dragging.value = false
-    document.removeEventListener('mousemove', onMove)
-    document.removeEventListener('mouseup', onUp)
-  }
-  document.addEventListener('mousemove', onMove)
-  document.addEventListener('mouseup', onUp)
-}
-
-const startResize = (e: MouseEvent, dir: ResizeDir) => {
-  const origin = ensureBox()
-  if (!origin) return
-  resizing.value = true
-  const startX = e.clientX
-  const startY = e.clientY
-
-  const onMove = (ev: MouseEvent) => {
-    const dx = ev.clientX - startX
-    const dy = ev.clientY - startY
-    let { left, top, width, height } = origin
-
-    if (dir.includes('e')) width = origin.width + dx
-    if (dir.includes('s')) height = origin.height + dy
-    if (dir.includes('w')) {
-      width = origin.width - dx
-      left = origin.left + dx
-      if (width < props.minWidth) {
-        width = props.minWidth
-        left = origin.left + origin.width - props.minWidth
-      }
-    }
-    if (dir.includes('n')) {
-      height = origin.height - dy
-      top = origin.top + dy
-      if (height < props.minHeight) {
-        height = props.minHeight
-        top = origin.top + origin.height - props.minHeight
-      }
-    }
-    box.value = clampBox({ left, top, width, height }, 'resize')
-  }
-
-  const onUp = () => {
-    resizing.value = false
-    document.removeEventListener('mousemove', onMove)
-    document.removeEventListener('mouseup', onUp)
-  }
-  document.addEventListener('mousemove', onMove)
-  document.addEventListener('mouseup', onUp)
-}
-
-const onKeydown = (e: KeyboardEvent) => {
-  if (!dialogVisible.value || isMinimized.value) return
-  if (props.closeOnPressEscape && e.key === 'Escape') requestClose()
-}
-
-const resetState = () => {
-  isMinimized.value = false
-  isFullscreen.value = !!props.fullscreen
-  box.value = null
-  restoreBox.value = null
-  closing.value = false
-  dragging.value = false
-  resizing.value = false
-}
-
-watch(
-  () => props.fullscreen,
-  (v) => {
-    isFullscreen.value = !!v
-  },
-  { immediate: true }
-)
-
-watch(dialogVisible, async (v) => {
-  if (v) {
-    closing.value = false
-    if (props.destroyOnClose) contentAlive.value = true
-    lockBodyScroll(true)
-    emit('open')
-    await nextTick()
-    // 居中模式下预计算像素盒会破坏 CSS 居中；保持 CSS，直到用户拖拽/拉伸
-    if (!props.alignCenter && !box.value && panelRef.value) {
-      // top 模式也等用户交互再固化
-    }
-    emit('opened')
-  } else {
-    lockBodyScroll(false)
-    emit('closed')
-    // 关闭完成后再清状态，避免关闭瞬间尺寸跳动
-    resetState()
-    if (props.destroyOnClose) contentAlive.value = false
-  }
-})
-
-onMounted(() => {
-  document.addEventListener('keydown', onKeydown)
-  if (dialogVisible.value) lockBodyScroll(true)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('keydown', onKeydown)
-  lockBodyScroll(false)
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-dialog-root {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-
-  &.is-open-in-tab {
-    position: absolute;
-  }
-
-  &.is-minimized-root {
-    .qiu-dialog__mask {
-      display: none;
-    }
-  }
-}
-
-.qiu-dialog__mask {
-  position: absolute;
-  inset: 0;
-  pointer-events: auto;
-  background: var(--qiu-overlay-color-lighter, rgba(0, 0, 0, 0.45));
-}
-
-.qiu-dialog {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  max-width: calc(100vw - 8px);
-  max-height: calc(100vh - 8px);
-  pointer-events: auto;
-  background: var(--qiu-bg-color, #fff);
-  border: 1px solid var(--qiu-border-color-lighter, #ebeef5);
-  border-radius: 8px;
-  box-shadow: var(--qiu-box-shadow, 0 12px 32px rgba(0, 0, 0, 0.12));
-  box-sizing: border-box;
-  overflow: visible;
-
-  &.qiu-dialog--animated {
-    transition: box-shadow 0.2s ease, opacity 0.2s ease;
-  }
-
-  &.qiu-dialog--centered {
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  &.qiu-dialog--topped {
-    /* left/transform 由 inline style 控制 */
-    top: auto;
-  }
-
-  &.qiu-dialog--fixed-box,
-  &.qiu-dialog--fullscreen {
-    transform: none;
-  }
-
-  &.qiu-dialog--minimized {
-    overflow: hidden;
-    border-radius: 8px;
-
-    .qiu-dialog__header {
-      height: 48px;
-      min-height: 48px;
-      padding: 0 8px 0 12px;
-      cursor: pointer;
-    }
-  }
-
-  &.qiu-dialog--fullscreen {
-    border-radius: 0;
-    max-width: none;
-    max-height: none;
-  }
-
-  /* 允许拖出可视区时取消 max 限制，否则会被 CSS 卡住 */
-  &.qiu-dialog--unbounded {
-    max-width: none;
-    max-height: none;
-  }
-}
-
-.qiu-dialog__header {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  min-height: 48px;
-  padding: 10px 108px 10px 16px;
-  border-bottom: 1px solid var(--qiu-border-color-lighter, #ebeef5);
-  user-select: none;
-  box-sizing: border-box;
-
-  &.is-movable {
-    cursor: move;
-  }
-}
-
-.qiu-dialog__title {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--qiu-text-color-primary, #303133);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  pointer-events: none;
-}
-
-.qiu-dialog__actions {
-  position: absolute;
-  top: 50%;
-  right: 8px;
-  display: inline-flex;
-  gap: 2px;
-  align-items: center;
-  transform: translateY(-50%);
-}
-
-.qiu-dialog__btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  color: var(--qiu-color-info, #909399);
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  border-radius: 4px;
-  outline: none;
-
-  &:hover {
-    color: var(--qiu-color-primary, #409eff);
-    background: var(--qiu-fill-color-light, #f5f7fa);
-  }
-
-  :deep(.qiu-icon) {
-    font-size: 16px;
-  }
-}
-
-.qiu-dialog__body {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
-  padding: 16px;
-  overflow: auto;
-  box-sizing: border-box;
-  color: var(--qiu-text-color-regular, #606266);
-  font-size: 14px;
-
-  &.is-loading {
-    pointer-events: none;
-  }
-}
-
-.qiu-dialog__loading {
-  position: absolute;
-  inset: 0;
-  z-index: 5;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: center;
-  justify-content: center;
-  background: color-mix(in srgb, var(--qiu-bg-color, #fff) 72%, transparent);
-}
-
-.qiu-dialog__spinner {
-  width: 28px;
-  height: 28px;
-  border: 2px solid var(--qiu-color-primary, #0f766e);
-  border-right-color: transparent;
-  border-radius: 50%;
-  animation: qiu-dialog-spin 0.7s linear infinite;
-}
-
-.qiu-dialog__loading-text {
-  font-size: 13px;
-  color: var(--qiu-text-color-secondary, #909399);
-}
-
-@keyframes qiu-dialog-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.qiu-dialog__footer {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  flex-shrink: 0;
-  gap: 8px;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 12px 16px;
-  border-top: 1px solid var(--qiu-border-color-lighter, #ebeef5);
-  box-sizing: border-box;
-}
-
-/*
-  拉伸热区全部贴在面板「外侧」：
-  - 右边用 left:100%（从右边界向外），绝不压到纵向滚动条
-  - 下边用 top:100%，不压横向滚动条
-*/
-.qiu-dialog__resize {
-  position: absolute;
-  z-index: 5;
-  background: transparent;
-}
-
-.qiu-dialog__resize--n {
-  bottom: 100%;
-  left: 8px;
-  right: 8px;
-  height: 8px;
-  cursor: ns-resize;
-}
-
-.qiu-dialog__resize--s {
-  top: 100%;
-  left: 8px;
-  right: 8px;
-  height: 8px;
-  cursor: ns-resize;
-}
-
-.qiu-dialog__resize--e {
-  left: 100%;
-  top: 8px;
-  bottom: 8px;
-  width: 8px;
-  cursor: ew-resize;
-}
-
-.qiu-dialog__resize--w {
-  right: 100%;
-  top: 8px;
-  bottom: 8px;
-  width: 8px;
-  cursor: ew-resize;
-}
-
-.qiu-dialog__resize--ne {
-  left: 100%;
-  bottom: 100%;
-  width: 12px;
-  height: 12px;
-  cursor: nesw-resize;
-}
-
-.qiu-dialog__resize--nw {
-  right: 100%;
-  bottom: 100%;
-  width: 12px;
-  height: 12px;
-  cursor: nwse-resize;
-}
-
-.qiu-dialog__resize--se {
-  left: 100%;
-  top: 100%;
-  width: 12px;
-  height: 12px;
-  cursor: nwse-resize;
-}
-
-.qiu-dialog__resize--sw {
-  right: 100%;
-  top: 100%;
-  width: 12px;
-  height: 12px;
-  cursor: nesw-resize;
-}
-</style>