foucui 1.0.1

package/components/QiuPagination/index.vue

@@ -0,0 +1,421 @@
+<template>
+  <div
+    v-if="!hideOnSinglePage || pageCount > 1"
+    class="qiu-pagination"
+    :class="[
+      `qiu-pagination--${type}`,
+      `qiu-pagination--${variant}`,
+      {
+        'is-background': background,
+        'is-small': small,
+        'is-disabled': disabled,
+      },
+    ]"
+    :style="colorStyle"
+  >
+    <span v-if="showTotal" class="qiu-pagination__total">
+      共 {{ total }} 条
+    </span>
+
+    <div v-if="showSizes" class="qiu-pagination__sizes">
+      <select
+        class="qiu-pagination__select"
+        :disabled="disabled"
+        :value="pageSize"
+        @change="onSizeChange"
+      >
+        <option v-for="size in pageSizes" :key="size" :value="size">
+          {{ size }} 条/页
+        </option>
+      </select>
+    </div>
+
+    <button
+      v-if="showPrev"
+      type="button"
+      class="qiu-pagination__btn qiu-pagination__prev"
+      :disabled="disabled || currentPage <= 1"
+      @click="goPrev"
+    >
+      ‹
+    </button>
+
+    <ul v-if="showPager" class="qiu-pagination__pager">
+      <li
+        v-for="page in pagerList"
+        :key="page.key"
+        class="qiu-pagination__page"
+        :class="{
+          'is-active': page.number === currentPage,
+          'is-ellipsis': page.ellipsis,
+        }"
+      >
+        <button
+          v-if="!page.ellipsis"
+          type="button"
+          class="qiu-pagination__page-btn"
+          :disabled="disabled"
+          @click="goPage(page.number!)"
+        >
+          {{ page.number }}
+        </button>
+        <span v-else class="qiu-pagination__ellipsis">…</span>
+      </li>
+    </ul>
+
+    <button
+      v-if="showNext"
+      type="button"
+      class="qiu-pagination__btn qiu-pagination__next"
+      :disabled="disabled || currentPage >= pageCount"
+      @click="goNext"
+    >
+      ›
+    </button>
+
+    <div v-if="showJumper" class="qiu-pagination__jumper">
+      <span>前往</span>
+      <input
+        v-model="jumperValue"
+        class="qiu-pagination__jumper-input"
+        type="text"
+        :disabled="disabled"
+        @keydown.enter="onJumperEnter"
+      />
+      <span>页</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+/**
+ * QiuPagination / QiuPage — 自研分页（多色 + 多风格）
+ */
+defineOptions({ name: 'QiuPagination' })
+
+const PAGE_COLORS: Record<string, string> = {
+  primary: 'var(--qiu-color-primary, #0f766e)',
+  success: 'var(--qiu-color-success, #67c23a)',
+  warning: 'var(--qiu-color-warning, #e6a23c)',
+  danger: 'var(--qiu-color-danger, #f56c6c)',
+  info: 'var(--qiu-color-info, #909399)',
+  cyan: '#0ea5e9',
+  orange: '#f97316',
+  pink: '#ec4899',
+  teal: '#14b8a6',
+}
+
+const props = withDefaults(
+  defineProps<{
+    total?: number
+    currentPage?: number
+    pageSize?: number
+    pageSizes?: number[]
+    layout?: string
+    background?: boolean
+    disabled?: boolean
+    hideOnSinglePage?: boolean
+    small?: boolean
+    pagerCount?: number
+    /** 主题色 */
+    type?: keyof typeof PAGE_COLORS | string
+    /** 任意色值，优先于 type */
+    color?: string
+    /** 风格 */
+    variant?: 'default' | 'plain' | 'pill' | 'outline' | 'soft'
+  }>(),
+  {
+    total: 0,
+    currentPage: 1,
+    pageSize: 10,
+    pageSizes: () => [10, 20, 50, 100],
+    layout: 'total, sizes, prev, pager, next, jumper',
+    background: true,
+    disabled: false,
+    hideOnSinglePage: false,
+    small: false,
+    pagerCount: 7,
+    type: 'primary',
+    variant: 'default',
+  }
+)
+
+const emit = defineEmits<{
+  'update:current-page': [number]
+  'update:page-size': [number]
+  'current-change': [number]
+  'size-change': [number]
+}>()
+
+const jumperValue = ref('')
+
+const colorStyle = computed(() => {
+  const hue = props.color || PAGE_COLORS[props.type] || PAGE_COLORS.primary
+  return { '--qiu-page-color': hue } as Record<string, string>
+})
+
+const layoutItems = computed(() =>
+  props.layout.split(',').map((s) => s.trim()).filter(Boolean)
+)
+
+const showTotal = computed(() => layoutItems.value.includes('total'))
+const showSizes = computed(() => layoutItems.value.includes('sizes'))
+const showPrev = computed(() => layoutItems.value.includes('prev'))
+const showPager = computed(() => layoutItems.value.includes('pager'))
+const showNext = computed(() => layoutItems.value.includes('next'))
+const showJumper = computed(() => layoutItems.value.includes('jumper'))
+
+const pageCount = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)))
+
+interface PagerItem {
+  key: string
+  number?: number
+  ellipsis?: boolean
+}
+
+const pagerList = computed((): PagerItem[] => {
+  const totalPages = pageCount.value
+  const current = props.currentPage
+  const count = props.pagerCount
+  const half = Math.floor(count / 2)
+
+  if (totalPages <= count) {
+    return Array.from({ length: totalPages }, (_, i) => ({
+      key: `p-${i + 1}`,
+      number: i + 1,
+    }))
+  }
+
+  const pages: PagerItem[] = []
+  pages.push({ key: 'p-1', number: 1 })
+
+  let start = Math.max(2, current - half)
+  let end = Math.min(totalPages - 1, current + half)
+
+  if (current <= half + 1) {
+    end = count - 2
+  } else if (current >= totalPages - half) {
+    start = totalPages - count + 2
+  }
+
+  if (start > 2) pages.push({ key: 'e-start', ellipsis: true })
+
+  for (let i = start; i <= end; i++) {
+    pages.push({ key: `p-${i}`, number: i })
+  }
+
+  if (end < totalPages - 1) pages.push({ key: 'e-end', ellipsis: true })
+
+  pages.push({ key: `p-${totalPages}`, number: totalPages })
+  return pages
+})
+
+const setCurrentPage = (page: number) => {
+  const next = Math.min(Math.max(1, page), pageCount.value)
+  if (next === props.currentPage) return
+  emit('update:current-page', next)
+  emit('current-change', next)
+}
+
+const setPageSize = (size: number) => {
+  if (size === props.pageSize) return
+  emit('update:page-size', size)
+  emit('size-change', size)
+  const maxPage = Math.max(1, Math.ceil(props.total / size))
+  if (props.currentPage > maxPage) {
+    setCurrentPage(maxPage)
+  }
+}
+
+const goPrev = () => setCurrentPage(props.currentPage - 1)
+const goNext = () => setCurrentPage(props.currentPage + 1)
+const goPage = (page: number) => setCurrentPage(page)
+
+const onSizeChange = (e: Event) => {
+  const val = Number((e.target as HTMLSelectElement).value)
+  if (!Number.isNaN(val)) setPageSize(val)
+}
+
+const onJumperEnter = () => {
+  const val = parseInt(jumperValue.value, 10)
+  if (!Number.isNaN(val)) {
+    setCurrentPage(val)
+    jumperValue.value = ''
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.qiu-pagination {
+  --qiu-page-color: var(--qiu-color-primary, #0f766e);
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  font-size: 14px;
+  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
+
+  &.is-small {
+    font-size: 12px;
+
+    .qiu-pagination__btn,
+    .qiu-pagination__page-btn,
+    .qiu-pagination__select,
+    .qiu-pagination__jumper-input {
+      min-width: 24px;
+      height: 24px;
+    }
+  }
+
+  &.is-disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  &__total {
+    display: inline-flex;
+    align-items: center;
+    height: 32px;
+    margin-right: 4px;
+    color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
+  }
+
+  &__select {
+    height: 32px;
+    padding: 0 8px;
+    color: inherit;
+    cursor: pointer;
+    background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
+    border: 1px solid var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
+    border-radius: var(--qiu-border-radius-base, 4px);
+    outline: none;
+  }
+
+  &__btn,
+  &__page-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 32px;
+    height: 32px;
+    padding: 0 6px;
+    font-size: inherit;
+    color: inherit;
+    cursor: pointer;
+    background: var(--qiu-bg-color, #fff);
+    border: 1px solid var(--qiu-border-color, #dcdfe6);
+    border-radius: var(--qiu-border-radius-base, 4px);
+    outline: none;
+    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
+
+    &:hover:not(:disabled) {
+      color: var(--qiu-page-color);
+      border-color: color-mix(in srgb, var(--qiu-page-color) 55%, #fff);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  &.is-background {
+    .qiu-pagination__btn,
+    .qiu-pagination__page-btn {
+      background: var(--qiu-fill-color-light, #f5f7fa);
+      border-color: transparent;
+    }
+  }
+
+  &__pager {
+    display: inline-flex;
+    gap: 4px;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  &__page.is-active .qiu-pagination__page-btn {
+    color: #fff;
+    background: var(--qiu-page-color);
+    border-color: var(--qiu-page-color);
+  }
+
+  &__ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 32px;
+    height: 32px;
+    color: var(--qiu-text-color-secondary, #909399);
+  }
+
+  &__jumper {
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    margin-left: 4px;
+  }
+
+  &__jumper-input {
+    width: 48px;
+    height: 32px;
+    padding: 0 6px;
+    text-align: center;
+    color: inherit;
+    background: var(--qiu-bg-color, #fff);
+    border: 1px solid var(--qiu-border-color, #dcdfe6);
+    border-radius: var(--qiu-border-radius-base, 4px);
+    outline: none;
+
+    &:focus {
+      border-color: var(--qiu-page-color);
+    }
+  }
+
+  /* variants */
+  &--pill {
+    .qiu-pagination__btn,
+    .qiu-pagination__page-btn,
+    .qiu-pagination__select,
+    .qiu-pagination__jumper-input {
+      border-radius: 999px;
+    }
+  }
+
+  &--plain {
+    .qiu-pagination__page.is-active .qiu-pagination__page-btn {
+      color: var(--qiu-page-color);
+      background: transparent;
+      border-color: var(--qiu-page-color);
+    }
+  }
+
+  &--outline {
+    .qiu-pagination__btn,
+    .qiu-pagination__page-btn {
+      background: transparent;
+    }
+
+    .qiu-pagination__page.is-active .qiu-pagination__page-btn {
+      color: var(--qiu-page-color);
+      background: transparent;
+      border-color: var(--qiu-page-color);
+      box-shadow: inset 0 0 0 1px var(--qiu-page-color);
+    }
+  }
+
+  &--soft {
+    .qiu-pagination__btn,
+    .qiu-pagination__page-btn {
+      background: color-mix(in srgb, var(--qiu-page-color) 10%, #fff);
+      border-color: transparent;
+    }
+
+    .qiu-pagination__page.is-active .qiu-pagination__page-btn {
+      color: #fff;
+      background: var(--qiu-page-color);
+    }
+  }
+}
+</style>

package/components/QiuPasswordStrength/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="qiu-pwd-strength" :class="[`qiu-pwd-strength--${level.label}`]">
+    <div class="qiu-pwd-strength__bars">
+      <span
+        v-for="i in 4"
+        :key="i"
+        class="qiu-pwd-strength__bar"
+        :class="{ 'is-on': i <= level.score }"
+      />
+    </div>
+    <span v-if="showLabel" class="qiu-pwd-strength__label">{{ level.text }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+defineOptions({ name: 'QiuPasswordStrength' })
+
+const props = withDefaults(
+  defineProps<{
+    password?: string
+    showLabel?: boolean
+  }>(),
+  {
+    password: '',
+    showLabel: true,
+  }
+)
+
+interface Level {
+  score: number
+  label: 'weak' | 'fair' | 'good' | 'strong'
+  text: string
+}
+
+const level = computed<Level>(() => {
+  const pwd = String(props.password || '')
+  if (!pwd) return { score: 0, label: 'weak', text: '' }
+
+  let score = 0
+  if (pwd.length >= 8) score++
+  if (/[A-Z]/.test(pwd) && /[a-z]/.test(pwd)) score++
+  if (/\d/.test(pwd)) score++
+  if (/[^A-Za-z0-9]/.test(pwd)) score++
+
+  // 长度特别短直接判弱
+  if (pwd.length < 6) score = Math.min(score, 1)
+
+  const map: Level[] = [
+    { score: 0, label: 'weak', text: '' },
+    { score: 1, label: 'weak', text: '弱' },
+    { score: 2, label: 'fair', text: '中' },
+    { score: 3, label: 'good', text: '强' },
+    { score: 4, label: 'strong', text: '极强' },
+  ]
+  return map[score]
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-pwd-strength {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.qiu-pwd-strength__bars {
+  display: inline-flex;
+  gap: 4px;
+}
+
+.qiu-pwd-strength__bar {
+  width: 28px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--qiu-border-color-lighter, #ebeef5);
+  transition: background 0.2s ease;
+
+  &.is-on {
+    background: var(--qiu-color-danger, #f56c6c);
+  }
+}
+
+.qiu-pwd-strength--fair .qiu-pwd-strength__bar.is-on {
+  background: var(--qiu-color-warning, #e6a23c);
+}
+
+.qiu-pwd-strength--good .qiu-pwd-strength__bar.is-on {
+  background: var(--qiu-color-primary, #409eff);
+}
+
+.qiu-pwd-strength--strong .qiu-pwd-strength__bar.is-on {
+  background: var(--qiu-color-success, #67c23a);
+}
+
+.qiu-pwd-strength__label {
+  font-size: 12px;
+  color: var(--qiu-text-color-secondary, #909399);
+}
+</style>

package/components/QiuPopconfirm/index.vue

@@ -0,0 +1,196 @@
+<template>
+  <span class="qiu-popconfirm-host">
+    <span ref="triggerRef" class="qiu-popconfirm__trigger" @click="open">
+      <slot name="reference" />
+    </span>
+
+    <Teleport to="body">
+      <Transition name="qiu-popconfirm-fade">
+        <div v-show="visible" class="qiu-popconfirm-root" :style="{ zIndex: String(zIndex) }">
+          <div class="qiu-popconfirm__mask" @click="onCancel" />
+          <div ref="popperRef" class="qiu-popconfirm" :style="popperStyle" @click.stop>
+            <div class="qiu-popconfirm__body">
+              <qiu-icon class="qiu-popconfirm__icon" icon="error-warning-line" />
+              <div class="qiu-popconfirm__title">{{ title }}</div>
+            </div>
+            <div class="qiu-popconfirm__actions">
+              <slot name="actions">
+                <qiu-button size="small" @click="onCancel">{{ cancelButtonText }}</qiu-button>
+                <qiu-button size="small" :type="confirmButtonType" @click="onConfirm">
+                  {{ confirmButtonText }}
+                </qiu-button>
+              </slot>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </span>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuPopconfirm', inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    confirmButtonText?: string
+    cancelButtonText?: string
+    confirmButtonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'
+    width?: string | number
+    zIndex?: number
+  }>(),
+  {
+    title: '确定执行此操作？',
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    confirmButtonType: 'primary',
+    width: 240,
+    zIndex: 2000,
+  }
+)
+
+const emit = defineEmits<{ confirm: []; cancel: [] }>()
+
+const triggerRef = ref<HTMLElement | null>(null)
+const popperRef = ref<HTMLElement | null>(null)
+const visible = ref(false)
+const popperStyle = ref<Record<string, string>>({})
+
+const resolvedWidth = computed(() =>
+  typeof props.width === 'number' ? `${props.width}px` : String(props.width)
+)
+
+const updatePosition = () => {
+  const trigger = triggerRef.value
+  const popper = popperRef.value
+  if (!trigger || !popper) return
+
+  const rect = trigger.getBoundingClientRect()
+  const popRect = popper.getBoundingClientRect()
+  const gap = 8
+  let top = rect.bottom + gap
+  let left = rect.left + rect.width / 2 - popRect.width / 2
+
+  const vw = window.innerWidth
+  left = Math.min(Math.max(8, left), vw - popRect.width - 8)
+
+  popperStyle.value = {
+    position: 'fixed',
+    top: `${top}px`,
+    left: `${left}px`,
+    width: resolvedWidth.value,
+  }
+}
+
+const open = async () => {
+  visible.value = true
+  await nextTick()
+  updatePosition()
+}
+
+const close = () => {
+  visible.value = false
+}
+
+const onConfirm = () => {
+  emit('confirm')
+  close()
+}
+
+const onCancel = () => {
+  emit('cancel')
+  close()
+}
+
+const onScrollOrResize = () => {
+  if (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(() => {
+  window.removeEventListener('scroll', onScrollOrResize, true)
+  window.removeEventListener('resize', onScrollOrResize)
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-popconfirm-host {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.qiu-popconfirm__trigger {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.qiu-popconfirm-root {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+}
+
+.qiu-popconfirm__mask {
+  position: absolute;
+  inset: 0;
+  pointer-events: auto;
+  background: transparent;
+}
+
+.qiu-popconfirm {
+  pointer-events: auto;
+  padding: 12px;
+  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: 4px;
+  box-shadow: var(--qiu-box-shadow-light, 0 4px 12px rgba(0, 0, 0, 0.1));
+  box-sizing: border-box;
+}
+
+.qiu-popconfirm__body {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.qiu-popconfirm__icon {
+  flex-shrink: 0;
+  margin-top: 2px;
+  font-size: 16px;
+  color: var(--qiu-color-warning, var(--qiu-color-warning, #e6a23c));
+}
+
+.qiu-popconfirm__title {
+  flex: 1;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
+}
+
+.qiu-popconfirm__actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 12px;
+}
+
+.qiu-popconfirm-fade-enter-active,
+.qiu-popconfirm-fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.qiu-popconfirm-fade-enter-from,
+.qiu-popconfirm-fade-leave-to {
+  opacity: 0;
+}
+</style>