foucui 1.0.1

package/components/QiuGrid/index.vue

@@ -0,0 +1,408 @@
+<template>
+  <div class="qiu-grid" :class="{ 'qiu-grid--loading': proxyLoading }">
+    <div v-if="showForm && ($slots.form || formConfig)" class="qiu-grid__form">
+      <slot name="form" :query="proxyQuery" :form="formModel" :reload="reload">
+        <div v-if="formFields.length" class="qiu-grid__form-inner">
+          <label v-for="f in formFields" :key="f.field" class="qiu-grid__form-item">
+            <span>{{ f.title || f.field }}</span>
+            <input
+              v-model="formModel[f.field]"
+              class="qiu-grid__form-input"
+              :placeholder="f.title || f.field"
+              @keydown.enter="reload()"
+            />
+          </label>
+          <button type="button" class="qiu-grid__form-btn" @click="reload()">查询</button>
+          <button type="button" class="qiu-grid__form-btn is-plain" @click="resetForm">重置</button>
+        </div>
+      </slot>
+    </div>
+
+    <qiu-table
+      ref="tableRef"
+      v-bind="tableBind"
+      :data="tableData"
+      :loading="proxyLoading || loading"
+      :pager-config="mergedPager"
+      :show-toolbar="showToolbar"
+      :show-export="toolbarConfig?.export !== false"
+      @page-change="onPageChange"
+      @refresh="reload"
+      @sort-change="onSortChange"
+      @filter-change="onFilterChange"
+    >
+      <template v-if="$slots.toolbar" #toolbar>
+        <slot name="toolbar" :reload="reload" :proxy="proxyState" />
+      </template>
+      <template v-if="$slots['toolbar-left']" #toolbar-left>
+        <slot name="toolbar-left" :reload="reload" :proxy="proxyState" />
+      </template>
+      <template v-if="$slots['toolbar-center']" #toolbar-center>
+        <slot name="toolbar-center" :reload="reload" :proxy="proxyState" />
+      </template>
+      <template v-if="$slots['toolbar-right']" #toolbar-right>
+        <slot name="toolbar-right" :reload="reload" :proxy="proxyState" />
+      </template>
+      <template v-if="$slots['toolbar-tools']" #toolbar-tools>
+        <slot name="toolbar-tools" />
+      </template>
+      <slot />
+    </qiu-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+/**
+ * QiuGrid — 配置式表格（对齐 vxe-grid 开源能力子集）
+ * columns + toolbar + pager + 轻量 form + proxyConfig
+ */
+import type {
+  QiuTableColumnConfig,
+  QiuTablePagerConfig,
+  QiuTableToolbarConfig,
+  QiuTableToolbarTool,
+} from '../QiuTable/types'
+
+defineOptions({ name: 'QiuGrid' })
+
+export interface QiuGridFormItem {
+  field: string
+  title?: string
+  itemRender?: any
+}
+
+export interface QiuGridProxyAjax {
+  query?: (params: {
+    page: { currentPage: number; pageSize: number }
+    form: Record<string, any>
+    sorts?: { prop: string; order: string | null }[]
+    filters?: Record<string, any[]>
+  }) => Promise<
+    | { result?: any[]; page?: { total?: number }; data?: any[]; total?: number }
+    | any[]
+  >
+  delete?: (params: { body: any[] }) => Promise<any>
+}
+
+export interface QiuGridProxyConfig {
+  enabled?: boolean
+  autoLoad?: boolean
+  ajax?: QiuGridProxyAjax
+  props?: {
+    result?: string
+    total?: string
+  }
+}
+
+export interface QiuGridToolbarConfig {
+  enabled?: boolean
+  refresh?: boolean
+  export?: boolean
+  import?: boolean
+  print?: boolean
+  custom?: boolean
+  zoom?: boolean
+  /** Excel 复制按钮 */
+  copy?: boolean
+  /** 内置工具按钮位置，默认 right */
+  toolsPlacement?: 'left' | 'center' | 'right'
+  /** 自定义工具插件 */
+  customTools?: QiuTableToolbarTool[]
+}
+
+const props = withDefaults(
+  defineProps<{
+    columns?: QiuTableColumnConfig[]
+    data?: any[]
+    loading?: boolean
+    height?: string | number
+    maxHeight?: string | number
+    border?: boolean | string
+    stripe?: boolean
+    round?: boolean
+    editable?: boolean
+    editTrigger?: string
+    editConfig?: Record<string, any>
+    rowKey?: string | ((row: any) => string)
+    showIndex?: boolean
+    showSelection?: boolean
+    showFooter?: boolean
+    tree?: boolean
+    pagerConfig?: QiuTablePagerConfig | boolean
+    toolbarConfig?: QiuGridToolbarConfig | boolean
+    formConfig?: { items?: QiuGridFormItem[]; enabled?: boolean } | boolean
+    proxyConfig?: QiuGridProxyConfig
+    sortConfig?: Record<string, any>
+    filterConfig?: Record<string, any>
+    columnConfig?: Record<string, any>
+    rowConfig?: Record<string, any>
+    customConfig?: Record<string, any>
+    menuConfig?: Record<string, any>
+    editRules?: Record<string, any>
+    virtualYConfig?: Record<string, any> | boolean
+    spanMethod?: Function
+    mergeCells?: any[]
+  }>(),
+  {
+    columns: () => [],
+    data: () => [],
+    loading: false,
+    border: true,
+    proxyConfig: undefined,
+  }
+)
+
+const emit = defineEmits<{
+  'proxy-query': [payload: any]
+  'proxy-delete': [payload: any]
+}>()
+
+const tableRef = ref<any>(null)
+const proxyLoading = ref(false)
+const remoteData = ref<any[] | null>(null)
+const remoteTotal = ref<number | null>(null)
+const innerPage = ref(1)
+const innerPageSize = ref(10)
+const lastSort = ref<{ prop: string; order: string | null } | null>(null)
+const lastFilters = ref<Record<string, any[]>>({})
+const formModel = reactive<Record<string, any>>({})
+
+const toolbarConfig = computed(() => {
+  if (props.toolbarConfig === false) return { enabled: false }
+  if (props.toolbarConfig === true || props.toolbarConfig == null) {
+    return { enabled: true, refresh: true, export: true, zoom: true, custom: true }
+  }
+  return { enabled: true, ...props.toolbarConfig }
+})
+
+const showToolbar = computed(() => toolbarConfig.value.enabled !== false)
+
+const tableToolbarConfig = computed((): QiuTableToolbarConfig => {
+  const cfg = toolbarConfig.value
+  return {
+    enabled: cfg.enabled,
+    refresh: cfg.refresh,
+    export: cfg.export,
+    import: cfg.import,
+    print: cfg.print,
+    custom: cfg.custom,
+    zoom: cfg.zoom,
+    copy: cfg.copy,
+    toolsPlacement: cfg.toolsPlacement,
+    customTools: cfg.customTools,
+  }
+})
+
+const slots = useSlots()
+
+const showForm = computed(() => {
+  if (props.formConfig === false) return false
+  if (props.formConfig === true) return true
+  if (props.formConfig && typeof props.formConfig === 'object') {
+    return props.formConfig.enabled !== false
+  }
+  return !!slots.form
+})
+
+const formFields = computed(() => {
+  if (props.formConfig && typeof props.formConfig === 'object') {
+    return props.formConfig.items || []
+  }
+  return [] as QiuGridFormItem[]
+})
+
+watch(
+  formFields,
+  (items) => {
+    items.forEach((f) => {
+      if (!(f.field in formModel)) formModel[f.field] = ''
+    })
+  },
+  { immediate: true }
+)
+
+const proxyEnabled = computed(
+  () =>
+    props.proxyConfig?.enabled !== false &&
+    !!props.proxyConfig?.ajax?.query
+)
+
+const tableData = computed(() => {
+  if (proxyEnabled.value && remoteData.value) return remoteData.value
+  return props.data || []
+})
+
+const mergedPager = computed(() => {
+  const base =
+    props.pagerConfig === true
+      ? { enabled: true }
+      : props.pagerConfig && typeof props.pagerConfig === 'object'
+        ? { ...props.pagerConfig }
+        : proxyEnabled.value
+          ? { enabled: true }
+          : false
+  if (!base || base === false) return false
+  return {
+    ...base,
+    currentPage: innerPage.value,
+    pageSize: innerPageSize.value,
+    total: remoteTotal.value ?? base.total ?? tableData.value.length,
+  }
+})
+
+const tableBind = computed(() => {
+  const {
+    data: _d,
+    loading: _l,
+    pagerConfig: _p,
+    toolbarConfig: _t,
+    formConfig: _f,
+    proxyConfig: _px,
+    ...rest
+  } = props
+  return {
+    ...rest,
+    toolbarConfig: tableToolbarConfig.value,
+    showExport: toolbarConfig.value.export !== false,
+    customConfig:
+      props.customConfig ||
+      (toolbarConfig.value.custom !== false ? { enabled: true } : undefined),
+    showPrint: toolbarConfig.value.print === true,
+    showImport: toolbarConfig.value.import === true,
+    showCopy: toolbarConfig.value.copy === true,
+  }
+})
+
+const proxyState = computed(() => ({
+  loading: proxyLoading.value,
+  data: tableData.value,
+  total: remoteTotal.value,
+  form: formModel,
+}))
+
+const getByPath = (obj: any, path: string) => {
+  if (!path) return obj
+  return path.split('.').reduce((o, k) => (o == null ? o : o[k]), obj)
+}
+
+const reload = async () => {
+  if (!proxyEnabled.value || !props.proxyConfig?.ajax?.query) {
+    emit('proxy-query', { form: { ...formModel } })
+    return
+  }
+  proxyLoading.value = true
+  try {
+    const res = await props.proxyConfig.ajax.query({
+      page: { currentPage: innerPage.value, pageSize: innerPageSize.value },
+      form: { ...formModel },
+      sorts: lastSort.value ? [lastSort.value] : [],
+      filters: lastFilters.value,
+    })
+    const resultPath = props.proxyConfig.props?.result || 'result'
+    const totalPath = props.proxyConfig.props?.total || 'page.total'
+    if (Array.isArray(res)) {
+      remoteData.value = res
+      remoteTotal.value = res.length
+    } else {
+      const list = getByPath(res, resultPath) ?? (res as any).data ?? []
+      remoteData.value = Array.isArray(list) ? list : []
+      const total =
+        getByPath(res, totalPath) ??
+        (res as any).total ??
+        (res as any).page?.total ??
+        remoteData.value.length
+      remoteTotal.value = Number(total) || 0
+    }
+    emit('proxy-query', { form: { ...formModel }, result: remoteData.value })
+  } finally {
+    proxyLoading.value = false
+  }
+}
+
+const resetForm = () => {
+  Object.keys(formModel).forEach((k) => {
+    formModel[k] = ''
+  })
+  innerPage.value = 1
+  reload()
+}
+
+const proxyQuery = reload
+
+const onPageChange = (p: { currentPage: number; pageSize: number }) => {
+  innerPage.value = p.currentPage
+  innerPageSize.value = p.pageSize
+  if (proxyEnabled.value) reload()
+}
+
+const onSortChange = (p: { prop: string; order: string | null }) => {
+  lastSort.value = p
+  if (props.sortConfig?.remote && proxyEnabled.value) reload()
+}
+
+const onFilterChange = (p: Record<string, any[]>) => {
+  lastFilters.value = p
+  if (props.filterConfig?.remote && proxyEnabled.value) reload()
+}
+
+onMounted(() => {
+  if (proxyEnabled.value && props.proxyConfig?.autoLoad !== false) reload()
+})
+
+defineExpose({
+  reload,
+  getTable: () => tableRef.value,
+  commitProxy: reload,
+  formModel,
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  min-height: 0;
+}
+
+.qiu-grid__form-inner {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: flex-end;
+  padding: 8px 0;
+}
+
+.qiu-grid__form-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+  color: #606266;
+}
+
+.qiu-grid__form-input {
+  min-width: 140px;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+
+.qiu-grid__form-btn {
+  height: 28px;
+  padding: 0 12px;
+  color: #fff;
+  border: 1px solid var(--qiu-color-primary, #0f766e);
+  border-radius: 4px;
+  background: var(--qiu-color-primary, #0f766e);
+  cursor: pointer;
+
+  &.is-plain {
+    color: #606266;
+    background: #fff;
+    border-color: #dcdfe6;
+  }
+}
+</style>

package/components/QiuHoverCard/index.vue

@@ -0,0 +1,192 @@
+<template>
+  <span ref="triggerRef" class="qiu-hover-card" @mouseenter="onEnter" @mouseleave="onLeave">
+    <slot name="trigger" />
+  </span>
+
+  <Teleport to="body">
+    <Transition name="qiu-hover-card-fade">
+      <div
+        v-if="visible"
+        ref="cardRef"
+        class="qiu-hover-card__panel"
+        :class="[`qiu-hover-card--${placement}`]"
+        :style="panelStyle"
+        @mouseenter="onCardEnter"
+        @mouseleave="onCardLeave"
+      >
+        <div v-if="title || $slots.title" class="qiu-hover-card__title">
+          <slot name="title">{{ title }}</slot>
+        </div>
+        <div class="qiu-hover-card__body">
+          <slot />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, ref } from 'vue'
+
+defineOptions({ name: 'QiuHoverCard' })
+
+type Placement = 'top' | 'bottom' | 'left' | 'right'
+
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    placement?: Placement
+    width?: number
+    /** 悬停延迟(ms) */
+    openDelay?: number
+    closeDelay?: number
+  }>(),
+  {
+    title: '',
+    placement: 'top',
+    width: 280,
+    openDelay: 80,
+    closeDelay: 120,
+  }
+)
+
+const emit = defineEmits<{ visibleChange: [boolean] }>()
+
+const triggerRef = ref<HTMLElement | null>(null)
+const cardRef = ref<HTMLElement | null>(null)
+const visible = ref(false)
+const panelStyle = ref<Record<string, string>>({})
+let openTimer: ReturnType<typeof setTimeout> | undefined
+let closeTimer: ReturnType<typeof setTimeout> | undefined
+let inCard = false
+
+const clearTimers = () => {
+  if (openTimer) clearTimeout(openTimer)
+  if (closeTimer) clearTimeout(closeTimer)
+}
+
+const open = async () => {
+  clearTimers()
+  openTimer = setTimeout(async () => {
+    visible.value = true
+    emit('visibleChange', true)
+    await nextTick()
+    updatePosition()
+  }, props.openDelay)
+}
+
+const scheduleClose = () => {
+  clearTimers()
+  closeTimer = setTimeout(() => {
+    if (!inCard) {
+      visible.value = false
+      emit('visibleChange', false)
+    }
+  }, props.closeDelay)
+}
+
+const onEnter = () => open()
+const onLeave = () => scheduleClose()
+const onCardEnter = () => {
+  inCard = true
+  clearTimers()
+}
+const onCardLeave = () => {
+  inCard = false
+  scheduleClose()
+}
+
+const updatePosition = () => {
+  const trigger = triggerRef.value
+  const card = cardRef.value
+  if (!trigger || !card) return
+  const rect = trigger.getBoundingClientRect()
+  const cardRect = card.getBoundingClientRect()
+  const gap = 10
+  let top = 0
+  let left = 0
+  switch (props.placement) {
+    case 'top':
+      top = rect.top - cardRect.height - gap
+      left = rect.left + rect.width / 2 - cardRect.width / 2
+      break
+    case 'left':
+      top = rect.top + rect.height / 2 - cardRect.height / 2
+      left = rect.left - cardRect.width - gap
+      break
+    case 'right':
+      top = rect.top + rect.height / 2 - cardRect.height / 2
+      left = rect.right + gap
+      break
+    default:
+      top = rect.bottom + gap
+      left = rect.left + rect.width / 2 - cardRect.width / 2
+  }
+  left = Math.min(Math.max(4, left), window.innerWidth - cardRect.width - 4)
+  top = Math.min(Math.max(4, top), window.innerHeight - cardRect.height - 4)
+  panelStyle.value = {
+    position: 'fixed',
+    top: `${top}px`,
+    left: `${left}px`,
+    width: `${props.width}px`,
+    zIndex: '2100',
+  }
+}
+
+const onScrollOrResize = () => visible.value && updatePosition()
+
+watch(visible, (v) => {
+  if (v) {
+    window.addEventListener('scroll', onScrollOrResize, true)
+    window.addEventListener('resize', onScrollOrResize)
+  } else {
+    window.removeEventListener('scroll', onScrollOrResize, true)
+    window.removeEventListener('resize', onScrollOrResize)
+  }
+})
+
+onBeforeUnmount(() => {
+  clearTimers()
+  window.removeEventListener('scroll', onScrollOrResize, true)
+  window.removeEventListener('resize', onScrollOrResize)
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-hover-card {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.qiu-hover-card__panel {
+  box-sizing: border-box;
+  background: var(--qiu-bg-color-overlay, #fff);
+  border: 1px solid var(--qiu-border-color-light, #e4e7ed);
+  border-radius: 8px;
+  box-shadow: var(--qiu-box-shadow-light, 0 6px 16px rgba(0, 0, 0, 0.12));
+}
+
+.qiu-hover-card__title {
+  padding: 12px 14px 4px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--qiu-text-color-primary, #303133);
+}
+
+.qiu-hover-card__body {
+  padding: 8px 14px 14px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--qiu-text-color-regular, #606266);
+}
+
+.qiu-hover-card-fade-enter-active,
+.qiu-hover-card-fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.qiu-hover-card-fade-enter-from,
+.qiu-hover-card-fade-leave-to {
+  opacity: 0;
+}
+</style>

package/components/QiuIcon/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <span
+    v-if="isIconify"
+    aria-hidden="true"
+    class="qiu-icon qiu-icon--iconify"
+    @click="onClick"
+  >
+    <Icon :icon="iconifyName" width="1em" height="1em" />
+  </span>
+  <svg
+    v-else-if="isCustomSvg"
+    aria-hidden="true"
+    class="qiu-icon qiu-icon--svg"
+    :class="{ 'is-keep-color': keepColor }"
+    :viewBox="viewBox || undefined"
+    @click="onClick"
+  >
+    <use :href="symbolHref" :xlink:href="symbolHref" />
+  </svg>
+  <i
+    v-else
+    aria-hidden="true"
+    class="qiu-icon"
+    :class="riClass"
+    @click="onClick"
+  />
+</template>
+
+<script lang="ts" setup>
+/**
+ * QiuIcon
+ * - Remix 本地字体：home-2-line / ri-home-2-line
+ * - Iconify：mdi:home / ant-design:home-outlined
+ * - 自定义 SVG：isCustomSvg + vite-plugin-svg-icons
+ */
+import { Icon } from '@iconify/vue'
+
+defineOptions({
+  name: 'QiuIcon',
+})
+
+const props = withDefaults(
+  defineProps<{
+    icon?: string
+    isCustomSvg?: boolean
+    /** 保留 SVG 原色（布局预览等多色图标） */
+    keepColor?: boolean
+    viewBox?: string
+  }>(),
+  {
+    icon: '',
+    isCustomSvg: false,
+    keepColor: false,
+    viewBox: '',
+  }
+)
+
+const emit = defineEmits<{ click: [MouseEvent] }>()
+
+const iconName = computed(() => String(props.icon || '').trim())
+
+const isIconify = computed(() => {
+  const name = iconName.value
+  return !!name && name.includes(':') && !name.startsWith('http') && !props.isCustomSvg
+})
+
+const iconifyName = computed(() => iconName.value)
+
+const riClass = computed(() => {
+  const name = iconName.value
+  if (!name) return ''
+  return name.startsWith('ri-') ? name : `ri-${name}`
+})
+
+const symbolHref = computed(() => `#qiu-icon-${iconName.value}`)
+
+const onClick = (e: MouseEvent) => emit('click', e)
+</script>
+
+<style scoped>
+.qiu-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+  font-family: remixicon !important;
+  font-size: inherit;
+  font-style: normal;
+  line-height: 1;
+  vertical-align: middle;
+  speak: never;
+}
+
+.qiu-icon--svg {
+  width: 1em;
+  height: 1em;
+  overflow: hidden;
+  /* 单色图标可用 currentColor；多色自定义 SVG 由使用方覆盖 fill */
+  fill: currentColor;
+}
+
+.qiu-icon--svg.is-keep-color,
+.qiu-icon--svg[data-keep-color] {
+  fill: unset;
+}
+
+.qiu-icon--iconify {
+  font-family: inherit !important;
+
+  :deep(svg) {
+    display: block;
+    width: 1em;
+    height: 1em;
+  }
+}
+</style>