foucui 1.0.1

package/components/QiuMsgBox/index.ts

@@ -0,0 +1,147 @@
+/**
+ * 简易确认/警告框（无 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

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

@@ -0,0 +1,155 @@
+/**
+ * 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

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

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

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

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