foucui 1.0.1 → 2.0.0

package/components/QiuMsgBox/index.ts

@@ -1,147 +0,0 @@
-/**
- * 简易确认/警告框（无 Element Plus）
- */
-import { createApp, h, reactive } from 'vue'
-
-type BoxOptions = {
-  title?: string
-  message: string | any
-  type?: 'warning' | 'info' | 'success' | 'error'
-  showCancel?: boolean
-  confirmButtonText?: string
-  cancelButtonText?: string
-  dangerouslyUseHTMLString?: boolean
-}
-
-const mountBox = (opts: BoxOptions) =>
-  new Promise<'confirm' | 'cancel'>((resolve) => {
-    const host = document.createElement('div')
-    document.body.appendChild(host)
-
-    const state = reactive({
-      title: opts.title || '温馨提示',
-      message: opts.message,
-      showCancel: !!opts.showCancel,
-      confirmText: opts.confirmButtonText || '确定',
-      cancelText: opts.cancelButtonText || '取消',
-      html: !!opts.dangerouslyUseHTMLString,
-    })
-
-    const close = (result: 'confirm' | 'cancel') => {
-      app.unmount()
-      host.remove()
-      resolve(result)
-    }
-
-    const app = createApp({
-      setup() {
-        return () =>
-          h('div', { class: 'qiu-msgbox-root' }, [
-            h('div', { class: 'qiu-msgbox-mask', onClick: () => state.showCancel && close('cancel') }),
-            h('div', { class: 'qiu-msgbox', role: 'dialog' }, [
-              h('div', { class: 'qiu-msgbox__title' }, state.title),
-              state.html
-                ? h('div', {
-                    class: 'qiu-msgbox__body',
-                    innerHTML: String(state.message ?? ''),
-                  })
-                : h('div', { class: 'qiu-msgbox__body' }, state.message),
-              h('div', { class: 'qiu-msgbox__footer' }, [
-                state.showCancel
-                  ? h(
-                      'button',
-                      {
-                        type: 'button',
-                        class: 'qiu-msgbox__btn',
-                        onClick: () => close('cancel'),
-                      },
-                      state.cancelText
-                    )
-                  : null,
-                h(
-                  'button',
-                  {
-                    type: 'button',
-                    class: 'qiu-msgbox__btn qiu-msgbox__btn--primary',
-                    onClick: () => close('confirm'),
-                  },
-                  state.confirmText
-                ),
-              ]),
-            ]),
-          ])
-      },
-    })
-
-    if (!document.getElementById('qiu-msgbox-style')) {
-      const style = document.createElement('style')
-      style.id = 'qiu-msgbox-style'
-      style.textContent = `
-.qiu-msgbox-root{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center}
-.qiu-msgbox-mask{position:absolute;inset:0;background:rgba(0,0,0,.45)}
-.qiu-msgbox{position:relative;z-index:1;width:min(420px,92vw);padding:16px 18px;border-radius:8px;background:var(--qiu-bg-color,#fff);box-shadow:0 12px 32px rgba(0,0,0,.18);color:var(--qiu-text-color,#303133)}
-.qiu-msgbox__title{font-size:16px;font-weight:600;margin-bottom:10px}
-.qiu-msgbox__body{font-size:14px;line-height:1.6;color:var(--qiu-text-color-regular,#606266);max-height:50vh;overflow:auto}
-.qiu-msgbox__footer{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
-.qiu-msgbox__btn{height:32px;padding:0 14px;border-radius:4px;border:1px solid var(--qiu-border-color,#dcdfe6);background:#fff;cursor:pointer}
-.qiu-msgbox__btn--primary{color:#fff;background:var(--qiu-color-primary,#0f766e);border-color:var(--qiu-color-primary,#0f766e)}
-`
-      document.head.appendChild(style)
-    }
-
-    app.mount(host)
-  })
-
-export const qiuAlert = async (
-  content: any,
-  title = '温馨提示',
-  callback?: () => void
-) => {
-  if (title && typeof title === 'function') {
-    callback = title
-    title = '温馨提示'
-  }
-  await mountBox({
-    title: String(title),
-    message: content,
-    dangerouslyUseHTMLString: true,
-    showCancel: false,
-  })
-  callback?.()
-}
-
-export const qiuConfirm = (
-  content: any,
-  title = '温馨提示',
-  onOk?: () => void,
-  onCancel?: () => void,
-  confirmButtonText = '确定',
-  cancelButtonText = '取消'
-) =>
-  mountBox({
-    title,
-    message: content,
-    showCancel: true,
-    confirmButtonText,
-    cancelButtonText,
-    dangerouslyUseHTMLString: typeof content === 'string' && content.includes('<'),
-  }).then((r) => {
-    if (r === 'confirm') onOk?.()
-    else onCancel?.()
-  })
-
-/** Promise 版：返回 'confirm' | 'cancel'，便于 async/await */
-export const qiuConfirmPromise = (
-  content: any,
-  title = '温馨提示',
-  opts?: Pick<BoxOptions, 'confirmButtonText' | 'cancelButtonText' | 'dangerouslyUseHTMLString'>
-) =>
-  mountBox({
-    title,
-    message: content,
-    showCancel: true,
-    confirmButtonText: opts?.confirmButtonText || '确定',
-    cancelButtonText: opts?.cancelButtonText || '取消',
-    dangerouslyUseHTMLString:
-      opts?.dangerouslyUseHTMLString ?? (typeof content === 'string' && content.includes('<')),
-  })

package/components/QiuNotification/QiuNotificationItem.vue

@@ -1,168 +0,0 @@
-<template>
-  <transition name="qiu-notify-fade">
-    <div
-      v-show="visible"
-      class="qiu-notify"
-      :class="[`qiu-notify--${type}`, `qiu-notify--${position}`]"
-    >
-      <i class="qiu-notify__icon" :class="iconClass" />
-      <div class="qiu-notify__content">
-        <div v-if="title" class="qiu-notify__title">{{ title }}</div>
-        <div v-if="message" class="qiu-notify__message">{{ message }}</div>
-      </div>
-      <i v-if="showClose" class="qiu-notify__close ri-close-line" @click="$emit('close')" />
-    </div>
-  </transition>
-</template>
-
-<script lang="ts" setup>
-import type { QiuNotifyPosition, QiuNotifyType } from './types'
-
-defineOptions({ name: 'QiuNotificationItem' })
-
-const props = defineProps<{
-  id: string
-  type: QiuNotifyType
-  position: QiuNotifyPosition
-  title: string
-  message: string
-  showClose: boolean
-  visible: boolean
-}>()
-
-defineEmits<{ close: [] }>()
-
-const iconClass = computed(() => {
-  const map: Record<QiuNotifyType, 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-notify-host {
-  position: fixed;
-  z-index: 5001;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  pointer-events: none;
-
-  &--top-right {
-    top: var(--qiu-notify-offset, 20px);
-    right: var(--qiu-notify-offset, 20px);
-    align-items: flex-end;
-  }
-
-  &--top-left {
-    top: var(--qiu-notify-offset, 20px);
-    left: var(--qiu-notify-offset, 20px);
-    align-items: flex-start;
-  }
-
-  &--bottom-right {
-    right: var(--qiu-notify-offset, 20px);
-    bottom: var(--qiu-notify-offset, 20px);
-    align-items: flex-end;
-  }
-
-  &--bottom-left {
-    bottom: var(--qiu-notify-offset, 20px);
-    left: var(--qiu-notify-offset, 20px);
-    align-items: flex-start;
-  }
-}
-
-.qiu-notify-wrap {
-  pointer-events: auto;
-}
-
-.qiu-notify {
-  display: flex;
-  align-items: flex-start;
-  width: 330px;
-  max-width: min(330px, 90vw);
-  padding: 14px 16px;
-  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: var(--qiu-border-radius-base, 4px);
-  box-shadow: var(--qiu-box-shadow-light, 0 4px 12px rgba(0, 0, 0, 0.1));
-
-  &__icon {
-    flex-shrink: 0;
-    margin-right: 10px;
-    font-size: 20px;
-    line-height: 1.4;
-  }
-
-  &__content {
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__title {
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 1.4;
-    color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
-  }
-
-  &__message {
-    margin-top: 4px;
-    font-size: 14px;
-    line-height: 1.5;
-    color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
-    word-break: break-word;
-  }
-
-  &__close {
-    flex-shrink: 0;
-    margin-left: 10px;
-    font-size: 16px;
-    color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
-    cursor: pointer;
-
-    &:hover {
-      color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
-    }
-  }
-
-  &--success .qiu-notify__icon {
-    color: var(--qiu-color-success, var(--qiu-color-success, #67c23a));
-  }
-
-  &--warning .qiu-notify__icon {
-    color: var(--qiu-color-warning, var(--qiu-color-warning, #e6a23c));
-  }
-
-  &--info .qiu-notify__icon {
-    color: var(--qiu-color-info, var(--qiu-color-info, #909399));
-  }
-
-  &--error .qiu-notify__icon {
-    color: var(--qiu-color-danger, var(--qiu-color-danger, #f56c6c));
-  }
-}
-
-.qiu-notify-fade-enter-active,
-.qiu-notify-fade-leave-active {
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-
-.qiu-notify-fade-enter-from,
-.qiu-notify-fade-leave-to {
-  opacity: 0;
-  transform: translateX(12px);
-}
-
-.qiu-notify-host--top-left .qiu-notify-fade-enter-from,
-.qiu-notify-host--top-left .qiu-notify-fade-leave-to,
-.qiu-notify-host--bottom-left .qiu-notify-fade-enter-from,
-.qiu-notify-host--bottom-left .qiu-notify-fade-leave-to {
-  transform: translateX(-12px);
-}
-</style>

package/components/QiuNotification/index.ts

@@ -1,155 +0,0 @@
-/**
- * QiuNotification — 角落通知服务
- */
-import { createApp, h, ref, type App } from 'vue'
-import QiuNotificationItem from './QiuNotificationItem.vue'
-import type { QiuNotifyOptions, QiuNotifyPosition, QiuNotifyType } from './types'
-
-export type { QiuNotifyOptions, QiuNotifyPosition, QiuNotifyType } from './types'
-
-interface NotifyRecord {
-  id: string
-  app: App
-  el: HTMLElement
-  position: QiuNotifyPosition
-  timer?: ReturnType<typeof setTimeout>
-}
-
-const stacks: Record<QiuNotifyPosition, NotifyRecord[]> = {
-  'top-right': [],
-  'top-left': [],
-  'bottom-right': [],
-  'bottom-left': [],
-}
-
-let seed = 0
-
-const ensureHost = (position: QiuNotifyPosition, offset = 20) => {
-  const id = `qiu-notify-host-${position}`
-  let host = document.getElementById(id)
-  if (!host) {
-    host = document.createElement('div')
-    host.id = id
-    host.className = `qiu-notify-host qiu-notify-host--${position}`
-    document.body.appendChild(host)
-  }
-  host.style.setProperty('--qiu-notify-offset', `${offset}px`)
-  return host
-}
-
-const closeById = (id: string) => {
-  ;(Object.keys(stacks) as QiuNotifyPosition[]).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()
-    }
-  })
-}
-
-const closeAll = (position?: QiuNotifyPosition) => {
-  const positions = position ? [position] : (Object.keys(stacks) as QiuNotifyPosition[])
-  positions.forEach((pos) => {
-    ;[...stacks[pos]].forEach((rec) => closeById(rec.id))
-  })
-}
-
-export const qiuNotify = Object.assign(
-  (options: QiuNotifyOptions | string) => {
-    const opts: QiuNotifyOptions =
-      typeof options === 'string' ? { message: options } : { ...options }
-    const position = opts.position || 'top-right'
-    const type = opts.type || 'info'
-    const duration = opts.duration ?? 4500
-    const id = opts.id || `qiu-notify-${++seed}`
-    const offset = opts.offset ?? 20
-
-    closeById(id)
-
-    const host = ensureHost(position, offset)
-    const el = document.createElement('div')
-    el.className = 'qiu-notify-wrap'
-    host.appendChild(el)
-
-    const visible = ref(true)
-    const rec: NotifyRecord = { 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(QiuNotificationItem, {
-            id,
-            type,
-            position,
-            title: opts.title || '',
-            message: opts.message || '',
-            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)
-
-    return { close: () => closeById(id), id }
-  },
-  {
-    success(options: string | QiuNotifyOptions) {
-      return typeof options === 'string'
-        ? qiuNotify({ message: options, type: 'success' })
-        : qiuNotify({ ...options, type: 'success' })
-    },
-    warning(options: string | QiuNotifyOptions) {
-      return typeof options === 'string'
-        ? qiuNotify({ message: options, type: 'warning' })
-        : qiuNotify({ ...options, type: 'warning' })
-    },
-    info(options: string | QiuNotifyOptions) {
-      return typeof options === 'string'
-        ? qiuNotify({ message: options, type: 'info' })
-        : qiuNotify({ ...options, type: 'info' })
-    },
-    error(options: string | QiuNotifyOptions) {
-      return typeof options === 'string'
-        ? qiuNotify({ message: options, type: 'error' })
-        : qiuNotify({ ...options, type: 'error' })
-    },
-    closeAll,
-  }
-) as QiuNotifyFn
-
-export default {
-  install(app: App) {
-    app.config.globalProperties.$qiuNotify = qiuNotify
-    app.provide('$qiuNotify', qiuNotify)
-  },
-}
-
-export type QiuNotifyFn = ((options: QiuNotifyOptions | string) => { close: () => void; id: string }) & {
-  success: (options: string | QiuNotifyOptions) => { close: () => void; id: string }
-  warning: (options: string | QiuNotifyOptions) => { close: () => void; id: string }
-  info: (options: string | QiuNotifyOptions) => { close: () => void; id: string }
-  error: (options: string | QiuNotifyOptions) => { close: () => void; id: string }
-  closeAll: (position?: QiuNotifyPosition) => void
-}

package/components/QiuNotification/types.ts

@@ -1,14 +0,0 @@
-export type QiuNotifyPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
-
-export type QiuNotifyType = 'success' | 'warning' | 'info' | 'error'
-
-export interface QiuNotifyOptions {
-  title?: string
-  message?: string
-  type?: QiuNotifyType
-  duration?: number
-  position?: QiuNotifyPosition
-  offset?: number
-  id?: string
-  onClose?: () => void
-}

package/components/QiuPage/index.vue

@@ -1,12 +0,0 @@
-<template>
-  <qiu-pagination v-bind="$attrs">
-    <slot />
-  </qiu-pagination>
-</template>
-
-<script lang="ts" setup>
-/**
- * QiuPage — QiuPagination 别名封装
- */
-defineOptions({ name: 'QiuPage', inheritAttrs: false })
-</script>

package/components/QiuPageHeader/index.vue

@@ -1,115 +0,0 @@
-<template>
-  <div class="qiu-page-header">
-    <div v-if="$slots.breadcrumb" class="qiu-page-header__breadcrumb">
-      <slot name="breadcrumb" />
-    </div>
-    <div class="qiu-page-header__main">
-      <div class="qiu-page-header__left">
-        <button type="button" class="qiu-page-header__back" aria-label="返回" @click="emit('back')">
-          <slot name="icon">
-            <qiu-icon :icon="icon || 'arrow-left-line'" />
-          </slot>
-        </button>
-        <div class="qiu-page-header__heading">
-          <div v-if="title || $slots.title" class="qiu-page-header__title">
-            <slot name="title">{{ title }}</slot>
-          </div>
-          <div v-if="content || $slots.content" class="qiu-page-header__content">
-            <slot name="content">{{ content }}</slot>
-          </div>
-        </div>
-      </div>
-      <div v-if="$slots.extra" class="qiu-page-header__extra">
-        <slot name="extra" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuPageHeader' })
-
-withDefaults(
-  defineProps<{
-    title?: string
-    content?: string
-    icon?: string
-  }>(),
-  {
-    title: '',
-    content: '',
-    icon: '',
-  }
-)
-
-const emit = defineEmits<{ back: [] }>()
-</script>
-
-<style lang="scss" scoped>
-.qiu-page-header {
-  padding: 16px 0;
-  background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
-
-  &__breadcrumb {
-    margin-bottom: 12px;
-    font-size: 13px;
-    color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
-  }
-
-  &__main {
-    display: flex;
-    gap: 16px;
-    align-items: flex-start;
-    justify-content: space-between;
-  }
-
-  &__left {
-    display: flex;
-    gap: 12px;
-    align-items: flex-start;
-    min-width: 0;
-  }
-
-  &__back {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    margin-top: 2px;
-    font-size: 18px;
-    color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
-    cursor: pointer;
-    background: transparent;
-    border: 0;
-    border-radius: 4px;
-    transition: background 0.15s;
-
-    &:hover {
-      background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
-    }
-  }
-
-  &__heading {
-    min-width: 0;
-  }
-
-  &__title {
-    font-size: 20px;
-    font-weight: 600;
-    line-height: 1.4;
-    color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
-  }
-
-  &__content {
-    margin-top: 6px;
-    font-size: var(--qiu-font-size, 14px);
-    line-height: 1.6;
-    color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
-  }
-
-  &__extra {
-    flex-shrink: 0;
-  }
-}
-</style>

package/components/QiuPageMain/index.vue

@@ -1,78 +0,0 @@
-<template>
-  <section class="qiu-page-main">
-    <header v-if="title || $slots.title || $slots.extra" class="qiu-page-main__header">
-      <div class="qiu-page-main__heading">
-        <slot name="title">
-          <h2 v-if="title" class="qiu-page-main__title">{{ title }}</h2>
-        </slot>
-        <p v-if="description || $slots.description" class="qiu-page-main__desc">
-          <slot name="description">{{ description }}</slot>
-        </p>
-      </div>
-      <div v-if="$slots.extra" class="qiu-page-main__extra">
-        <slot name="extra" />
-      </div>
-    </header>
-    <div class="qiu-page-main__body">
-      <slot />
-    </div>
-  </section>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuPageMain' })
-
-withDefaults(
-  defineProps<{
-    title?: string
-    description?: string
-  }>(),
-  {
-    title: '',
-    description: '',
-  }
-)
-</script>
-
-<style lang="scss" scoped>
-.qiu-page-main {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  padding: 16px;
-  background: var(--qiu-bg-color, #fff);
-  border-radius: var(--qiu-border-radius-base, 4px);
-}
-
-.qiu-page-main__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  padding-bottom: 12px;
-  margin-bottom: 16px;
-  border-bottom: 1px solid var(--qiu-border-color-lighter, #ebeef5);
-}
-
-.qiu-page-main__title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--qiu-text-color-primary, #303133);
-}
-
-.qiu-page-main__desc {
-  margin: 4px 0 0;
-  font-size: 13px;
-  color: var(--qiu-text-color-secondary, #909399);
-}
-
-.qiu-page-main__extra {
-  flex-shrink: 0;
-}
-
-.qiu-page-main__body {
-  flex: 1;
-  min-height: 0;
-}
-</style>