foucui 1.0.1

package/components/QiuDialog/index.vue

@@ -0,0 +1,828 @@
+<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>