foucui 1.0.1

package/components/QiuIconPicker/index.vue

@@ -0,0 +1,488 @@
+<template>
+  <div class="qiu-icon-picker">
+    <div class="qiu-icon-picker__trigger" @click="openDialog">
+      <span class="qiu-icon-picker__preview-wrap" :class="{ 'is-on': !!modelValue }">
+        <qiu-icon v-if="modelValue" :icon="modelValue" class="qiu-icon-picker__preview" />
+        <span v-else class="qiu-icon-picker__placeholder">{{ translate('选择图标') }}</span>
+      </span>
+      <qiu-input
+        :model-value="modelValue"
+        class="qiu-icon-picker__input"
+        :placeholder="placeholder"
+        clearable
+        @update:model-value="onInput"
+        @focus="openDialog"
+        @click.stop="openDialog"
+      />
+      <qiu-button size="small" @click.stop="openDialog">
+        <qiu-icon icon="apps-2-line" />
+      </qiu-button>
+    </div>
+
+    <qiu-dialog
+      v-model="visible"
+      :title="translate('选择图标')"
+      width="920px"
+      :z-index="5300"
+      :show-minimize="false"
+      :show-fullscreen="false"
+      destroy-on-close
+      @opened="onDialogOpened"
+    >
+      <div class="qiu-icon-picker__body">
+        <qiu-loading-spinner v-if="loadingLib" class="qiu-icon-picker__loading" />
+        <aside class="qiu-icon-picker__libs">
+          <button
+            v-for="lib in libraryStats"
+            :key="lib.id"
+            type="button"
+            class="qiu-icon-picker__lib"
+            :class="{ 'is-active': activeLib === lib.id }"
+            @click="switchLib(lib.id)"
+          >
+            <strong>{{ lib.name }}</strong>
+            <span>{{ lib.count }} icons</span>
+            <em>{{ lib.license }}</em>
+          </button>
+          <p class="qiu-icon-picker__license-tip">
+            {{ translate('均为免费开源图标，可商用（按需懒加载）') }}
+          </p>
+        </aside>
+
+        <div class="qiu-icon-picker__main">
+          <qiu-input
+            v-model="keyword"
+            clearable
+            :placeholder="translate('搜索图标名')"
+            class="qiu-icon-picker__search"
+            @input="page = 1"
+          >
+            <template #prefix>
+              <qiu-icon icon="search-line" />
+            </template>
+          </qiu-input>
+
+          <div class="qiu-icon-picker__meta">
+            <span>{{ filteredIcons.length }} / {{ currentCatalog.length }}</span>
+            <span v-if="modelValue" class="qiu-icon-picker__current">
+              {{ translate('当前') }}：
+              <span class="qiu-icon-picker__current-icon">
+                <qiu-icon :icon="modelValue" />
+              </span>
+              <code>{{ modelValue }}</code>
+            </span>
+            <qiu-button v-if="modelValue" link type="danger" size="small" @click="clearIcon">
+              {{ translate('清除') }}
+            </qiu-button>
+          </div>
+
+          <div class="qiu-icon-picker__grid">
+            <button
+              type="button"
+              class="qiu-icon-picker__item is-clear"
+              :title="translate('清除图标')"
+              @click="clearIcon"
+            >
+              <qiu-icon icon="delete-bin-line" />
+              <span>{{ translate('清除') }}</span>
+            </button>
+            <button
+              v-for="name in pagedIcons"
+              :key="name"
+              type="button"
+              class="qiu-icon-picker__item"
+              :class="{ 'is-active': modelValue === toValue(name) }"
+              :title="toValue(name)"
+              @click="pick(name)"
+            >
+              <qiu-icon :icon="toValue(name)" />
+              <span>{{ name }}</span>
+            </button>
+          </div>
+
+          <qiu-empty v-if="!loadingLib && !filteredIcons.length" :description="translate('无匹配图标')" />
+
+          <div v-if="pageCount > 1" class="qiu-icon-picker__pager">
+            <qiu-pagination
+              v-model:current-page="page"
+              background
+              layout="prev, pager, next, jumper"
+              :page-size="pageSize"
+              :total="filteredIcons.length"
+              small
+            />
+          </div>
+        </div>
+      </div>
+    </qiu-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import QiuLoadingSpinner from '../QiuLoading/spinner.vue'
+import { translate } from '../../src/i18n'
+import { remixIconCatalog } from './icons.catalog'
+import {
+  detectLibraryId,
+  ensureIconifyLibrary,
+  iconifyLibraries,
+  toPickerValue,
+  type IconifyLibId,
+  type IconifyLibraryDef,
+} from './iconify.libraries'
+
+defineOptions({
+  name: 'QiuIconPicker',
+})
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    placeholder?: string
+  }>(),
+  {
+    modelValue: '',
+    placeholder: 'home-2-line / mdi:home',
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const visible = ref(false)
+const keyword = ref('')
+const page = ref(1)
+const pageSize = 60
+const activeLib = ref<IconifyLibId>('remix')
+const loadingLib = ref(false)
+const catalogByLib = reactive<Record<string, string[]>>({
+  remix: remixIconCatalog,
+})
+const countByLib = reactive<Record<string, number>>({
+  remix: remixIconCatalog.length,
+})
+
+const currentLib = computed(
+  () => iconifyLibraries.find((l) => l.id === activeLib.value) || iconifyLibraries[0]
+)
+
+const libraryStats = computed(() =>
+  iconifyLibraries.map((lib) => ({
+    ...lib,
+    count: countByLib[lib.id] || (lib.localRemix ? remixIconCatalog.length : '…'),
+  }))
+)
+
+const currentCatalog = computed(() => catalogByLib[activeLib.value] || [])
+
+const filteredIcons = computed(() => {
+  const q = keyword.value.trim().toLowerCase()
+  if (!q) return currentCatalog.value
+  return currentCatalog.value.filter((name) => name.toLowerCase().includes(q))
+})
+
+const pageCount = computed(() => Math.max(1, Math.ceil(filteredIcons.value.length / pageSize)))
+
+const pagedIcons = computed(() => {
+  const start = (page.value - 1) * pageSize
+  return filteredIcons.value.slice(start, start + pageSize)
+})
+
+const toValue = (iconName: string) => toPickerValue(currentLib.value, iconName)
+
+const loadLib = async (lib: IconifyLibraryDef) => {
+  if (lib.localRemix) {
+    catalogByLib.remix = remixIconCatalog
+    countByLib.remix = remixIconCatalog.length
+    return
+  }
+  if (catalogByLib[lib.id]?.length) return
+  loadingLib.value = true
+  try {
+    const names = await ensureIconifyLibrary(lib)
+    catalogByLib[lib.id] = names
+    countByLib[lib.id] = names.length
+  } finally {
+    loadingLib.value = false
+  }
+}
+
+const switchLib = async (id: IconifyLibId) => {
+  activeLib.value = id
+  page.value = 1
+  keyword.value = ''
+  const lib = iconifyLibraries.find((l) => l.id === id)
+  if (lib) await loadLib(lib)
+}
+
+const openDialog = () => {
+  visible.value = true
+}
+
+const onDialogOpened = async () => {
+  activeLib.value = detectLibraryId(props.modelValue)
+  await loadLib(currentLib.value)
+}
+
+const pick = (name: string) => {
+  emit('update:modelValue', toValue(name))
+  visible.value = false
+}
+
+const clearIcon = () => {
+  emit('update:modelValue', '')
+}
+
+const onInput = (val: string) => {
+  emit('update:modelValue', val || '')
+  keyword.value = val?.includes(':') ? val.split(':')[1] || '' : val || ''
+  page.value = 1
+  visible.value = true
+}
+</script>
+
+<style lang="scss" scoped>
+.qiu-icon-picker {
+  width: 100%;
+
+  &__trigger {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    width: 100%;
+  }
+
+  &__preview-wrap {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    color: var(--qiu-text-color-secondary);
+    background: var(--qiu-fill-color-light);
+    border: 1px solid var(--qiu-border-color-lighter);
+    border-radius: 8px;
+
+    &.is-on {
+      color: var(--qiu-color-primary);
+      background: var(--qiu-color-primary-light-9);
+      border-color: color-mix(in srgb, var(--qiu-color-primary) 35%, transparent);
+    }
+  }
+
+  &__preview {
+    font-size: 20px;
+  }
+
+  &__placeholder {
+    font-size: 11px;
+    color: var(--qiu-text-color-placeholder);
+    text-align: center;
+  }
+
+  &__input {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__body {
+    position: relative;
+    display: grid;
+    grid-template-columns: 210px minmax(0, 1fr);
+    gap: 12px;
+    height: min(48vh, 420px);
+    max-height: min(48vh, 420px);
+    min-height: 280px;
+  }
+
+  &__loading {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    pointer-events: auto;
+  }
+
+  &__libs {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    height: 100%;
+    min-height: 0;
+    padding: 4px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background: var(--qiu-fill-color-lighter);
+    border-radius: 8px;
+  }
+
+  &__lib {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex-shrink: 0;
+    align-items: flex-start;
+    padding: 10px 12px;
+    text-align: left;
+    cursor: pointer;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 8px;
+
+    strong {
+      font-size: 13px;
+      color: var(--qiu-text-color-primary);
+    }
+
+    span {
+      font-size: 12px;
+      color: var(--qiu-text-color-secondary);
+    }
+
+    em {
+      font-size: 11px;
+      font-style: normal;
+      color: var(--qiu-text-color-placeholder);
+    }
+
+    &:hover,
+    &.is-active {
+      background: var(--qiu-bg-color);
+      border-color: var(--qiu-color-primary-light-5);
+      box-shadow: 0 1px 4px rgb(0 0 0 / 6%);
+    }
+
+    &.is-active strong {
+      color: var(--qiu-color-primary);
+    }
+  }
+
+  &__license-tip {
+    flex-shrink: 0;
+    margin: 8px 4px 0;
+    font-size: 11px;
+    line-height: 1.4;
+    color: var(--qiu-text-color-placeholder);
+  }
+
+  &__main {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  &__search {
+    flex-shrink: 0;
+    margin-bottom: 8px;
+  }
+
+  &__meta {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    gap: 12px;
+    align-items: center;
+    margin-bottom: 8px;
+    font-size: 12px;
+    color: var(--qiu-text-color-secondary);
+  }
+
+  &__current {
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+
+    code {
+      font-size: 12px;
+    }
+  }
+
+  &__current-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    color: var(--qiu-color-primary);
+    background: var(--qiu-color-primary-light-9);
+    border-radius: 6px;
+  }
+
+  &__grid {
+    display: grid;
+    flex: 1 1 auto;
+    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+    gap: 8px;
+    align-content: start;
+    min-height: 0;
+    max-height: none;
+    padding-right: 4px;
+    overflow: auto;
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    align-items: center;
+    padding: 10px 6px;
+    font-size: 11px;
+    line-height: 1.2;
+    color: var(--qiu-text-color-regular);
+    cursor: pointer;
+    background: var(--qiu-fill-color-blank);
+    border: 1px solid var(--qiu-border-color-lighter);
+    border-radius: 8px;
+    transition: border-color 0.15s, background 0.15s, color 0.15s;
+
+    :deep(.qiu-icon) {
+      font-size: 22px;
+    }
+
+    span {
+      width: 100%;
+      overflow: hidden;
+      text-align: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &:hover,
+    &.is-active {
+      color: var(--qiu-color-primary);
+      background: var(--qiu-color-primary-light-9);
+      border-color: var(--qiu-color-primary);
+    }
+
+    &.is-clear {
+      color: var(--qiu-color-danger);
+      border-style: dashed;
+    }
+  }
+
+  &__pager {
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    margin-top: 12px;
+  }
+}
+
+@media (width <= 720px) {
+  .qiu-icon-picker__body {
+    grid-template-columns: 1fr;
+    height: min(60vh, 480px);
+    max-height: min(60vh, 480px);
+  }
+
+  .qiu-icon-picker__libs {
+    flex-direction: row;
+    height: auto;
+    max-height: 120px;
+    overflow: auto;
+  }
+}
+</style>

package/components/QiuImage/index.vue

@@ -0,0 +1,177 @@
+<template>
+  <div
+    class="qiu-image"
+    :class="{ 'is-preview': previewable }"
+    @click="onPreview"
+  >
+    <img
+      class="qiu-image__inner"
+      :src="src"
+      :alt="alt"
+      :loading="lazy ? 'lazy' : undefined"
+      :style="{ objectFit: fit }"
+    />
+    <div v-if="previewable" class="qiu-image__mask">
+      <qiu-icon icon="zoom-in-line" />
+    </div>
+
+    <Teleport to="body">
+      <Transition name="qiu-image-fade">
+        <div
+          v-if="previewVisible"
+          class="qiu-image__viewer"
+          @click.self="closePreview"
+        >
+          <button type="button" class="qiu-image__close" aria-label="关闭" @click="closePreview">
+            <qiu-icon icon="close-line" />
+          </button>
+          <img
+            class="qiu-image__preview"
+            :src="currentPreviewSrc"
+            :alt="alt"
+            @click.stop
+          />
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'QiuImage' })
+
+const props = withDefaults(
+  defineProps<{
+    src?: string
+    fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+    alt?: string
+    lazy?: boolean
+    previewSrcList?: string[]
+    hideOnClickModal?: boolean
+  }>(),
+  {
+    src: '',
+    fit: 'fill',
+    alt: '',
+    lazy: false,
+    previewSrcList: () => [],
+    hideOnClickModal: true,
+  }
+)
+
+const previewVisible = ref(false)
+
+const previewable = computed(() => props.previewSrcList.length > 0 || !!props.src)
+
+const currentPreviewSrc = computed(() => {
+  if (props.previewSrcList.length > 0) return props.previewSrcList[0]
+  return props.src
+})
+
+const onPreview = () => {
+  if (!previewable.value) return
+  previewVisible.value = true
+}
+
+const closePreview = () => {
+  if (!props.hideOnClickModal) return
+  previewVisible.value = false
+}
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Escape' && previewVisible.value) {
+    previewVisible.value = false
+  }
+}
+
+onMounted(() => window.addEventListener('keydown', onKeydown))
+onUnmounted(() => window.removeEventListener('keydown', onKeydown))
+</script>
+
+<style lang="scss" scoped>
+.qiu-image {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  line-height: 0;
+  background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
+  border-radius: var(--qiu-border-radius, var(--qiu-border-radius-base, 4px));
+
+  &.is-preview {
+    cursor: zoom-in;
+  }
+}
+
+.qiu-image__inner {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.qiu-image__mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  color: #fff;
+  background: rgb(0 0 0 / 35%);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+
+  .qiu-image:hover & {
+    opacity: 1;
+  }
+}
+
+.qiu-image__viewer {
+  position: fixed;
+  inset: 0;
+  z-index: 3000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(0 0 0 / 75%);
+}
+
+.qiu-image__preview {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  border-radius: 4px;
+  box-shadow: 0 8px 32px rgb(0 0 0 / 40%);
+}
+
+.qiu-image__close {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  font-size: 20px;
+  color: #fff;
+  cursor: pointer;
+  background: rgb(255 255 255 / 15%);
+  border: 0;
+  border-radius: 50%;
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: rgb(255 255 255 / 25%);
+  }
+}
+
+.qiu-image-fade-enter-active,
+.qiu-image-fade-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.qiu-image-fade-enter-from,
+.qiu-image-fade-leave-to {
+  opacity: 0;
+}
+</style>