foucui 1.0.1

package/components/QiuAutocomplete/index.vue

@@ -0,0 +1,408 @@
+<template>
+  <div
+    class="qiu-autocomplete"
+    :class="{
+      'is-disabled': props.disabled,
+      'is-focused': focused,
+      'is-clearable': props.clearable,
+      'has-value': hasValue,
+    }"
+    :style="{ width: props.width }"
+  >
+    <input
+      ref="inputRef"
+      :autofocus="props.autofocus"
+      class="qiu-autocomplete-input"
+      :disabled="props.disabled"
+      :placeholder="props.placeholder"
+      :readonly="props.readonly"
+      :required="props.required"
+      :style="{ height: props.height }"
+      :type="props.type"
+      :value="displayValue"
+      @change="handleInput"
+      @input="handleInput"
+      @focus="onFocus"
+      @blur="focused = false"
+      @keydown.down.prevent="moveActive(1)"
+      @keydown.up.prevent="moveActive(-1)"
+      @keydown.enter.prevent="confirmActive"
+      @keydown.esc="selectshow = false"
+    />
+    <div class="qiu-autocomplete-suffix">
+      <button
+        v-show="props.clearable && hasValue"
+        type="button"
+        class="qiu-autocomplete-clear"
+        tabindex="-1"
+        :title="'清空'"
+        @mousedown.prevent
+        @click="clearvalue"
+      >
+        <qiu-icon icon="close-circle-fill" />
+      </button>
+      <button
+        type="button"
+        class="qiu-autocomplete-caret"
+        tabindex="-1"
+        :class="{ 'is-open': selectshow }"
+        @mousedown.prevent
+        @click="toggleSelect"
+      >
+        <qiu-icon icon="arrow-down-s-line" />
+      </button>
+    </div>
+    <div v-if="selectshow" class="qiu-autocomplete-list">
+      <div
+        v-for="(item, idx) in serachList"
+        :key="idx"
+        class="qiu-autocomplete-list-item"
+        :class="{ 'is-active': idx === activeIndex }"
+        :title="buildDisplayString(item)"
+        @mousedown.prevent
+        @click="handleItem(item)"
+        @mouseenter="activeIndex = idx"
+      >
+        <span class="qiu-ellipsis">{{ buildDisplayString(item) }}</span>
+      </div>
+      <div v-if="!serachList.length" class="qiu-autocomplete-empty">无匹配数据</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+/**
+ * QiuAutocomplete — 多字段模糊搜索下拉（兼容 Vite / Vue3）
+ */
+defineOptions({ name: 'QiuAutocomplete' })
+
+export interface AutocompleteItem {
+  value?: string | number | boolean
+  [key: string]: unknown
+}
+
+const props = withDefaults(
+  defineProps<{
+    value?: string
+    modelValue?: string | boolean
+    placeholder?: string
+    disabled?: boolean
+    clearable?: boolean
+    autofocus?: boolean
+    required?: boolean
+    readonly?: boolean
+    type?: string
+    maxlength?: number
+    minlength?: number
+    width?: string
+    height?: string
+    list?: AutocompleteItem[]
+    searchekey?: string[]
+    showkey?: string[]
+    showline?: string
+    valueKey?: string
+  }>(),
+  {
+    value: '',
+    modelValue: '',
+    placeholder: '',
+    disabled: false,
+    clearable: false,
+    autofocus: false,
+    required: false,
+    readonly: false,
+    type: 'text',
+    maxlength: 0,
+    minlength: 1,
+    width: '100%',
+    height: '32px',
+    list: () => [],
+    searchekey: () => ['value'],
+    showkey: () => ['value'],
+    showline: ' - ',
+    valueKey: 'value',
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [string]
+  change: [string]
+  itemclick: [AutocompleteItem | true]
+}>()
+
+const selectshow = ref(false)
+const focused = ref(false)
+const inputRef = ref<HTMLInputElement | null>(null)
+const serachList = ref<AutocompleteItem[]>([...props.list])
+const activeIndex = ref(-1)
+
+const displayValue = computed(() => {
+  if (props.modelValue !== '' && props.modelValue !== undefined && props.modelValue !== null) {
+    return String(props.modelValue)
+  }
+  return props.value || ''
+})
+
+const hasValue = computed(() => displayValue.value.length > 0)
+
+watch(
+  () => props.list,
+  (list) => {
+    serachList.value = [...list]
+  },
+  { deep: true }
+)
+
+const buildDisplayString = (item: AutocompleteItem) => {
+  return props.showkey
+    .map((key) => (Reflect.has(item, key) ? String(item[key] ?? '') : ''))
+    .filter(Boolean)
+    .join(props.showline)
+}
+
+const searchData = (data: AutocompleteItem[], searchText: string, searchFields: string[]) => {
+  const result: AutocompleteItem[] = []
+  if (!Array.isArray(data) || typeof searchText !== 'string') {
+    serachList.value = result
+    return result
+  }
+  const fields = Array.isArray(searchFields) ? searchFields : ['value']
+  const lower = searchText.toLowerCase()
+  for (const item of data) {
+    for (const field of fields) {
+      if (Reflect.has(item, field) && String(item[field]).toLowerCase().includes(lower)) {
+        result.push(item)
+        break
+      }
+    }
+  }
+  serachList.value = result
+  activeIndex.value = result.length ? 0 : -1
+  return result
+}
+
+const handleInput = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  nextTick(() => {
+    if (!inputRef.value) return
+    if (target.value.length > 0) {
+      selectshow.value = true
+      searchData(props.list, target.value, props.searchekey)
+    } else {
+      selectshow.value = false
+      serachList.value = [...props.list]
+    }
+  })
+  emit('update:modelValue', target.value)
+  emit('change', target.value)
+}
+
+const handleItem = (item: AutocompleteItem) => {
+  const v = String(item[props.valueKey] ?? item.value ?? '')
+  if (inputRef.value) inputRef.value.value = v
+  emit('change', v)
+  emit('update:modelValue', v)
+  emit('itemclick', item)
+  selectshow.value = false
+}
+
+const toggleSelect = () => {
+  if (props.disabled || props.readonly) return
+  selectshow.value = !selectshow.value
+  if (selectshow.value) {
+    inputRef.value?.focus()
+    const q = inputRef.value?.value || ''
+    if (q) searchData(props.list, q, props.searchekey)
+    else serachList.value = [...props.list]
+  }
+}
+
+const onFocus = () => {
+  focused.value = true
+  if (!props.disabled && !props.readonly) {
+    selectshow.value = true
+    const q = inputRef.value?.value || ''
+    if (q) searchData(props.list, q, props.searchekey)
+    else serachList.value = [...props.list]
+  }
+}
+
+const clearvalue = () => {
+  if (inputRef.value) inputRef.value.value = ''
+  selectshow.value = false
+  serachList.value = [...props.list]
+  emit('change', '')
+  emit('update:modelValue', '')
+  inputRef.value?.focus()
+}
+
+const moveActive = (delta: number) => {
+  if (!selectshow.value || !serachList.value.length) return
+  const len = serachList.value.length
+  activeIndex.value = (activeIndex.value + delta + len) % len
+}
+
+const confirmActive = () => {
+  if (activeIndex.value >= 0 && serachList.value[activeIndex.value]) {
+    handleItem(serachList.value[activeIndex.value])
+  }
+}
+
+const onDocClick = (e: MouseEvent) => {
+  const root = (e.target as HTMLElement)?.closest?.('.qiu-autocomplete')
+  const self = inputRef.value?.closest('.qiu-autocomplete')
+  if (self && root !== self) selectshow.value = false
+}
+
+onMounted(() => document.addEventListener('mousedown', onDocClick))
+onUnmounted(() => document.removeEventListener('mousedown', onDocClick))
+</script>
+
+<style scoped lang="scss">
+.qiu-autocomplete {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  vertical-align: middle;
+
+  &.is-focused .qiu-autocomplete-input {
+    border-color: var(--qiu-color-primary);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--qiu-color-primary) 25%, transparent);
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+
+    .qiu-autocomplete-input {
+      cursor: not-allowed;
+      background: var(--qiu-fill-color-light, #f5f7fa);
+    }
+  }
+}
+
+.qiu-autocomplete-input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 32px;
+  padding: 0 36px 0 12px;
+  font-size: 14px;
+  line-height: 1;
+  color: var(--qiu-text-color-primary, #303133);
+  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: border-color 0.2s ease;
+}
+
+.qiu-autocomplete.is-clearable.has-value .qiu-autocomplete-input {
+  padding-right: 56px;
+}
+
+.qiu-autocomplete-suffix {
+  position: absolute;
+  top: 0;
+  right: 4px;
+  bottom: 0;
+  z-index: 2;
+  display: inline-flex;
+  gap: 2px;
+  align-items: center;
+  justify-content: flex-end;
+  pointer-events: none;
+}
+
+.qiu-autocomplete-clear,
+.qiu-autocomplete-caret {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  color: var(--qiu-text-color-placeholder, #a8abb2);
+  cursor: pointer;
+  pointer-events: auto;
+  background: transparent;
+  border: 0;
+  border-radius: 50%;
+  outline: none;
+  transition: color 0.15s ease, background 0.15s ease;
+
+  :deep(.qiu-icon) {
+    font-size: 14px;
+    line-height: 1;
+  }
+
+  &:hover {
+    color: var(--qiu-text-color-regular, #606266);
+    background: var(--qiu-fill-color-light, #f5f7fa);
+  }
+}
+
+.qiu-autocomplete-clear:hover {
+  color: var(--qiu-color-info);
+}
+
+.qiu-autocomplete-caret {
+  &.is-open {
+    color: var(--qiu-color-primary);
+
+    :deep(.qiu-icon) {
+      transform: rotate(180deg);
+    }
+  }
+
+  :deep(.qiu-icon) {
+    transition: transform 0.2s ease;
+  }
+}
+
+.qiu-autocomplete-list {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 3000;
+  width: 100%;
+  max-height: 280px;
+  overflow-y: auto;
+  background: var(--qiu-bg-color-overlay, #fff);
+  border: 1px solid var(--qiu-border-color-light, #e4e7ed);
+  border-radius: 6px;
+  box-shadow: var(--qiu-box-shadow-light, 0 4px 12px rgb(0 0 0 / 10%));
+}
+
+.qiu-autocomplete-list-item {
+  height: 34px;
+  padding: 0 12px;
+  overflow: hidden;
+  line-height: 34px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover,
+  &.is-active {
+    color: var(--qiu-color-primary);
+    background: var(--qiu-fill-color-light, #f5f7fa);
+  }
+}
+
+.qiu-autocomplete-empty {
+  padding: 14px 12px;
+  font-size: 13px;
+  color: var(--qiu-text-color-secondary);
+  text-align: center;
+}
+
+.qiu-ellipsis {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/components/QiuAvatar/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <span
+    class="qiu-avatar"
+    :class="[
+      `qiu-avatar--${shape}`,
+      `qiu-avatar--${sizeClass}`,
+      { 'is-image': !!src && !imgError },
+    ]"
+    :style="wrapStyle"
+  >
+    <img
+      v-if="src && !imgError"
+      class="qiu-avatar__img"
+      :src="src"
+      :alt="alt"
+      :style="{ objectFit: fit }"
+      @error="onError"
+    />
+    <span v-else-if="$slots.default" class="qiu-avatar__slot">
+      <slot />
+    </span>
+    <span v-else class="qiu-avatar__text">{{ displayText }}</span>
+  </span>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuAvatar' })
+
+const props = withDefaults(
+  defineProps<{
+    src?: string
+    alt?: string
+    /** large | default | small | 数字像素 */
+    size?: 'large' | 'default' | 'small' | number
+    shape?: 'circle' | 'square'
+    fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+    /** 无图时显示文字（默认取首字） */
+    text?: string
+    icon?: string
+  }>(),
+  {
+    alt: '',
+    size: 'default',
+    shape: 'circle',
+    fit: 'cover',
+    text: '',
+  }
+)
+
+const emit = defineEmits<{
+  error: [Event]
+}>()
+
+const imgError = ref(false)
+
+watch(
+  () => props.src,
+  () => {
+    imgError.value = false
+  }
+)
+
+const sizeClass = computed(() =>
+  typeof props.size === 'number' ? 'custom' : props.size
+)
+
+const wrapStyle = computed(() => {
+  if (typeof props.size !== 'number') return undefined
+  const s = `${props.size}px`
+  return { width: s, height: s, fontSize: `${Math.max(12, props.size * 0.4)}px` }
+})
+
+const displayText = computed(() => {
+  if (props.text) return props.text.slice(0, 2)
+  return '?'
+})
+
+const onError = (e: Event) => {
+  imgError.value = true
+  emit('error', e)
+}
+</script>
+
+<style lang="scss" scoped>
+.qiu-avatar {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  color: #fff;
+  vertical-align: middle;
+  background: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
+  user-select: none;
+
+  &--circle {
+    border-radius: 50%;
+  }
+
+  &--square {
+    border-radius: 4px;
+  }
+
+  &--large {
+    width: 56px;
+    height: 56px;
+    font-size: 22px;
+  }
+
+  &--default {
+    width: 40px;
+    height: 40px;
+    font-size: 16px;
+  }
+
+  &--small {
+    width: 28px;
+    height: 28px;
+    font-size: 12px;
+  }
+
+  &.is-image {
+    background: transparent;
+  }
+
+  &__img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+  }
+
+  &__text,
+  &__slot {
+    font-weight: 600;
+    line-height: 1;
+  }
+}
+</style>

package/components/QiuBacktop/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <Teleport to="body">
+    <Transition name="qiu-backtop-fade">
+      <button
+        v-show="visible"
+        type="button"
+        class="qiu-backtop"
+        :style="btnStyle"
+        aria-label="回到顶部"
+        @click="scrollToTop"
+      >
+        <slot>
+          <qiu-icon icon="arrow-up-line" />
+        </slot>
+      </button>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuBacktop' })
+
+const props = withDefaults(
+  defineProps<{
+    /** 滚动超过该高度后显示 */
+    scrollVisibilityHeight?: number
+    right?: number
+    bottom?: number
+    zIndex?: number
+    /** 滚动容器选择器，默认 window */
+    target?: string
+  }>(),
+  {
+    scrollVisibilityHeight: 200,
+    right: 40,
+    bottom: 40,
+    zIndex: 100,
+    target: '',
+  }
+)
+
+const visible = ref(false)
+
+const getScrollContainer = (): HTMLElement | Window => {
+  if (!props.target) return window
+  const el = document.querySelector(props.target)
+  return (el as HTMLElement) || window
+}
+
+const getScrollTop = (container: HTMLElement | Window) => {
+  if (container === window) return window.scrollY || document.documentElement.scrollTop
+  return (container as HTMLElement).scrollTop
+}
+
+const btnStyle = computed(() => ({
+  right: `${props.right}px`,
+  bottom: `${props.bottom}px`,
+  zIndex: String(props.zIndex),
+}))
+
+const onScroll = () => {
+  const container = getScrollContainer()
+  visible.value = getScrollTop(container) >= props.scrollVisibilityHeight
+}
+
+const scrollToTop = () => {
+  const container = getScrollContainer()
+  if (container === window) {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  } else {
+    ;(container as HTMLElement).scrollTo({ top: 0, behavior: 'smooth' })
+  }
+}
+
+let containerEl: HTMLElement | Window = window
+
+onMounted(() => {
+  containerEl = getScrollContainer()
+  containerEl.addEventListener('scroll', onScroll, { passive: true })
+  onScroll()
+})
+
+onBeforeUnmount(() => {
+  containerEl.removeEventListener('scroll', onScroll)
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-backtop {
+  position: fixed;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  font-size: 18px;
+  color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
+  cursor: pointer;
+  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: 50%;
+  box-shadow: var(--qiu-box-shadow-light, 0 2px 12px rgba(0, 0, 0, 0.1));
+  transition: background 0.15s, color 0.15s;
+
+  &:hover {
+    color: #fff;
+    background: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
+  }
+}
+
+.qiu-backtop-fade-enter-active,
+.qiu-backtop-fade-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.qiu-backtop-fade-enter-from,
+.qiu-backtop-fade-leave-to {
+  opacity: 0;
+  transform: translateY(8px);
+}
+</style>