vome-core 0.0.1

package/src/admin/components/vm-icon-picker.vue

@@ -0,0 +1,616 @@
+<template>
+  <div ref="rootRef" class="vm-icon-picker">
+    <div ref="triggerRef" class="vm-icon-picker__row">
+      <button
+        type="button"
+        class="vm-icon-picker__preview"
+        :class="{ 'is-open': open }"
+        :disabled="disabled"
+        :title="normalized || '选择图标'"
+        @click="toggle"
+      >
+        <i v-if="normalized" :class="normalized" />
+        <i v-else class="ri-apps-fill vm-icon-picker__preview-ph" />
+      </button>
+      <div class="vm-icon-picker__value">
+        <input
+          class="vm-icon-picker__input"
+          :value="displayName"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          @focus="openPanel"
+          @input="onNameInput"
+          @keydown.esc.stop="closePanel"
+        />
+        <i
+          v-if="displayName && clearable && !disabled"
+          class="ri-close-circle-fill vm-icon-picker__clear"
+          @click.stop="clearValue"
+        />
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <!-- 嵌套 FocusScope：暂停 Dialog 焦点陷阱，否则 Teleport 内 input 无法聚焦 -->
+      <FocusScope
+        v-if="open"
+        as-child
+        loop
+        :trapped="true"
+        @unmount-auto-focus="onPanelUnmountAutoFocus"
+      >
+        <div
+          ref="panelRef"
+          class="vm-icon-picker__panel vm-dialog-float"
+          :style="panelStyle"
+          @pointerdown.stop
+          @mousedown.stop
+        >
+          <div class="vm-icon-picker__toolbar">
+            <div class="vm-icon-picker__search">
+              <i class="ri-search-line vm-icon-picker__search-ico" />
+              <input
+                ref="searchRef"
+                class="vm-icon-picker__search-input"
+                :value="search"
+                placeholder="模糊搜索，如 home / shield"
+                @input="onSearchInput"
+                @keydown.esc.stop="closePanel"
+              />
+              <i
+                v-if="search"
+                class="ri-close-circle-fill vm-icon-picker__search-clear"
+                @click.stop="clearSearch"
+              />
+            </div>
+            <div class="vm-icon-picker__styles" role="group" aria-label="图标类型">
+              <button
+                v-for="opt in STYLE_OPTS"
+                :key="opt.value"
+                type="button"
+                class="vm-icon-picker__style-btn"
+                :class="{ 'is-active': styleFilter === opt.value }"
+                :title="opt.title"
+                @click.stop="setStyleFilter(opt.value)"
+              >
+                {{ opt.label }}
+              </button>
+            </div>
+          </div>
+
+          <div class="vm-icon-picker__grid">
+            <button
+              v-for="name in pageIcons"
+              :key="name"
+              type="button"
+              class="vm-icon-picker__cell"
+              :class="{ 'is-active': name === normalized }"
+              :title="name"
+              @click="pick(name)"
+            >
+              <i :class="name" />
+            </button>
+            <button
+              v-if="showRefresh"
+              type="button"
+              class="vm-icon-picker__more"
+              @click.prevent.stop="nextBatch"
+            >
+              换一批
+            </button>
+            <p v-if="!filtered.length" class="vm-icon-picker__empty">无匹配图标</p>
+          </div>
+        </div>
+      </FocusScope>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FocusScope } from 'reka-ui'
+import allIcons from '@vome-core/admin/data/remixicon-all.json'
+
+defineOptions({ name: 'vm-icon-picker' })
+
+type IconStyle = 'fill' | 'line' | 'other'
+
+const STYLE_OPTS: { value: IconStyle; label: string; title: string }[] = [
+  { value: 'fill', label: '实心', title: 'Fill 实心图标' },
+  { value: 'line', label: '线形', title: 'Line 线形图标' },
+  { value: 'other', label: '其它', title: '无 fill/line 后缀（多为编辑类）' },
+]
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    placeholder?: string
+    disabled?: boolean
+    clearable?: boolean
+  }>(),
+  {
+    placeholder: '如 ri-home-fill',
+    clearable: true,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: string]
+}>()
+
+/** 10 列 × 5 行 = 50 格，末尾 2 格给「换一批」 */
+const PAGE_SIZE = 48
+const ALL = allIcons as string[]
+
+const rootRef = ref<HTMLElement | null>(null)
+const triggerRef = ref<HTMLElement | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
+const searchRef = ref<HTMLInputElement | null>(null)
+const open = ref(false)
+const search = ref('')
+const page = ref(0)
+const styleFilter = ref<IconStyle>('fill')
+const panelStyle = ref<Record<string, string>>({})
+/** 关闭后面板卸载会回焦外层 input，避免再次触发 openPanel */
+const suppressOpen = ref(false)
+
+/** 仅补齐 ri- 前缀，保留 fill / line / 其它原样 */
+function normalizeIcon(raw: string | null | undefined): string {
+  if (!raw) return ''
+  let n = String(raw).trim()
+  if (!n) return ''
+  if (!n.startsWith('ri-')) n = `ri-${n}`
+  return n
+}
+
+function styleOf(name: string): IconStyle {
+  if (name.endsWith('-fill')) return 'fill'
+  if (name.endsWith('-line')) return 'line'
+  return 'other'
+}
+
+const normalized = computed(() => normalizeIcon(props.modelValue))
+
+/** 外层输入框展示当前 icon 名称（与 v-model 同步） */
+const displayName = computed(() => {
+  const raw = props.modelValue
+  if (raw == null || raw === '') return ''
+  return String(raw)
+})
+
+function fuzzyMatch(hay: string, needle: string): boolean {
+  const h = hay.toLowerCase()
+  const n = needle.toLowerCase().replace(/\s+/g, '')
+  if (!n) return true
+  if (h.includes(n)) return true
+  let j = 0
+  for (let i = 0; i < h.length && j < n.length; i++) {
+    if (h[i] === n[j]) j++
+  }
+  return j === n.length
+}
+
+function iconSearchKey(name: string) {
+  return name
+    .replace(/^ri-/, '')
+    .replace(/-fill$/, '')
+    .replace(/-line$/, '')
+    .replace(/-/g, '')
+}
+
+const filtered = computed(() => {
+  const byStyle = ALL.filter((name) => styleOf(name) === styleFilter.value)
+  const q = search.value.trim()
+  if (!q) return byStyle
+  const qKey = q
+    .replace(/^ri-/, '')
+    .replace(/-fill$/, '')
+    .replace(/-line$/, '')
+  return byStyle.filter((name) => {
+    if (fuzzyMatch(name, q)) return true
+    if (fuzzyMatch(iconSearchKey(name), qKey.replace(/-/g, ''))) return true
+    return fuzzyMatch(
+      name.replace(/^ri-/, '').replace(/-fill$/, '').replace(/-line$/, ''),
+      qKey,
+    )
+  })
+})
+
+const pageCount = computed(() =>
+  Math.max(1, Math.ceil(filtered.value.length / PAGE_SIZE)),
+)
+
+const pageIcons = computed(() => {
+  const start = (page.value % pageCount.value) * PAGE_SIZE
+  return filtered.value.slice(start, start + PAGE_SIZE)
+})
+
+const showRefresh = computed(() => filtered.value.length > PAGE_SIZE)
+
+watch(filtered, () => {
+  page.value = 0
+})
+
+function setStyleFilter(v: IconStyle) {
+  styleFilter.value = v
+  page.value = 0
+}
+
+function syncPanelPos() {
+  const el = triggerRef.value
+  if (!el) return
+  const r = el.getBoundingClientRect()
+  const width = Math.min(480, window.innerWidth - 16)
+  let left = r.left
+  if (left + width > window.innerWidth - 8) {
+    left = Math.max(8, window.innerWidth - width - 8)
+  }
+  let top = r.bottom + 6
+  const estH = 320
+  if (top + estH > window.innerHeight - 8) {
+    top = Math.max(8, r.top - estH - 6)
+  }
+  panelStyle.value = {
+    position: 'fixed',
+    top: `${top}px`,
+    left: `${left}px`,
+    width: `${width}px`,
+    zIndex: '100',
+  }
+}
+
+async function openPanel() {
+  if (props.disabled || suppressOpen.value) return
+  styleFilter.value = 'fill'
+  open.value = true
+  await nextTick()
+  syncPanelPos()
+}
+
+/** 禁止卸载时把焦点塞回外层名称框（否则 @focus 会立刻再次打开） */
+function onPanelUnmountAutoFocus(event: Event) {
+  event.preventDefault()
+}
+
+function closePanel() {
+  if (!open.value) return
+  suppressOpen.value = true
+  open.value = false
+  search.value = ''
+  page.value = 0
+  styleFilter.value = 'fill'
+  // 等 FocusScope 卸载与可能的回焦完成后再允许打开
+  nextTick(() => {
+    requestAnimationFrame(() => {
+      suppressOpen.value = false
+    })
+  })
+}
+
+async function toggle() {
+  if (props.disabled) return
+  if (open.value) {
+    closePanel()
+    return
+  }
+  await openPanel()
+}
+
+/** 外层输入：直接编辑 / 存储 icon 名称 */
+function onNameInput(e: Event) {
+  const v = (e.target as HTMLInputElement).value.trim()
+  emit('update:modelValue', v)
+  if (!open.value) openPanel()
+}
+
+function clearValue() {
+  emit('update:modelValue', '')
+}
+
+function onSearchInput(e: Event) {
+  search.value = (e.target as HTMLInputElement).value
+}
+
+function clearSearch() {
+  search.value = ''
+  searchRef.value?.focus()
+}
+
+function pick(name: string) {
+  emit('update:modelValue', name)
+  closePanel()
+}
+
+function nextBatch() {
+  page.value = (page.value + 1) % pageCount.value
+}
+
+function onDocPointer(e: Event) {
+  if (!open.value) return
+  const t = e.target as Node | null
+  if (!t) return
+  if (rootRef.value?.contains(t)) return
+  if (panelRef.value?.contains(t)) return
+  closePanel()
+}
+
+function onWinChange() {
+  if (open.value) syncPanelPos()
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', onDocPointer, true)
+  window.addEventListener('resize', onWinChange)
+  window.addEventListener('scroll', onWinChange, true)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('pointerdown', onDocPointer, true)
+  window.removeEventListener('resize', onWinChange)
+  window.removeEventListener('scroll', onWinChange, true)
+})
+</script>
+
+<style lang="scss" scoped>
+.vm-icon-picker {
+  width: 100%;
+}
+
+.vm-icon-picker__row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.vm-icon-picker__preview {
+  flex: 0 0 var(--vm-control-height);
+  width: var(--vm-control-height);
+  height: var(--vm-control-height);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border);
+  border-radius: var(--vm-control-radius);
+  background: var(--muted);
+  color: var(--foreground);
+  font-size: 16px;
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    background 0.15s,
+    color 0.15s;
+
+  &:hover:not(:disabled),
+  &.is-open {
+    border-color: var(--brand);
+    background: var(--brand-soft);
+    color: var(--brand);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.vm-icon-picker__preview-ph {
+  opacity: 0.35;
+}
+
+.vm-icon-picker__value {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+
+.vm-icon-picker__input {
+  width: 100%;
+  height: var(--vm-control-height);
+  padding: 0 26px 0 var(--vm-control-padding-x);
+  border: 1px solid var(--border);
+  border-radius: var(--vm-control-radius);
+  background: var(--muted);
+  color: var(--foreground);
+  font-size: var(--vm-control-font-size);
+  outline: none;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+
+  &::placeholder {
+    color: var(--muted-foreground);
+  }
+
+  &:focus {
+    border-color: var(--brand);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent);
+    background: #fff;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.vm-icon-picker__clear {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 14px;
+  color: var(--muted-foreground);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--foreground);
+  }
+}
+</style>
+
+<style lang="scss">
+/* Teleport 到 body，不可 scoped */
+.vm-icon-picker__panel {
+  /* Dialog modal 会给 body 设 pointer-events:none，Teleport 面板必须显式恢复 */
+  pointer-events: auto;
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: var(--shadow-soft);
+}
+
+.vm-icon-picker__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.vm-icon-picker__search {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+
+.vm-icon-picker__search-ico {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 14px;
+  color: var(--muted-foreground);
+  pointer-events: none;
+}
+
+.vm-icon-picker__search-input {
+  width: 100%;
+  height: var(--vm-control-height);
+  padding: 0 26px 0 28px;
+  border: 1px solid var(--border);
+  border-radius: var(--vm-control-radius);
+  background: var(--muted);
+  color: var(--foreground);
+  font-size: var(--vm-control-font-size);
+  outline: none;
+
+  &::placeholder {
+    color: var(--muted-foreground);
+  }
+
+  &:focus {
+    border-color: var(--brand);
+    background: #fff;
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent);
+  }
+}
+
+.vm-icon-picker__search-clear {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 14px;
+  color: var(--muted-foreground);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--foreground);
+  }
+}
+
+.vm-icon-picker__styles {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 4px;
+}
+
+.vm-icon-picker__style-btn {
+  height: var(--vm-control-height);
+  padding: 0 var(--vm-control-padding-x);
+  border: 1px solid var(--border);
+  border-radius: var(--vm-control-radius);
+  background: var(--muted);
+  color: var(--muted-foreground);
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background 0.12s,
+    color 0.12s,
+    border-color 0.12s;
+
+  &:hover {
+    border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
+    color: var(--brand);
+  }
+
+  &.is-active {
+    border-color: var(--brand);
+    background: var(--brand-soft);
+    color: var(--brand);
+  }
+}
+
+.vm-icon-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+  gap: 4px;
+}
+
+.vm-icon-picker__cell {
+  aspect-ratio: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: #50566b;
+  font-size: 18px;
+  cursor: pointer;
+  transition:
+    background 0.12s,
+    color 0.12s;
+
+  &:hover {
+    background: var(--brand-soft);
+    color: var(--brand);
+  }
+
+  &.is-active {
+    background: var(--brand-soft);
+    color: var(--brand);
+  }
+}
+
+.vm-icon-picker__more {
+  grid-column: span 2;
+  height: 100%;
+  min-height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed color-mix(in srgb, var(--brand) 35%, var(--border));
+  border-radius: 8px;
+  background: var(--brand-soft);
+  color: var(--brand);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s;
+
+  &:hover {
+    background: color-mix(in srgb, var(--brand) 16%, #fff);
+  }
+}
+
+.vm-icon-picker__empty {
+  grid-column: 1 / -1;
+  margin: 12px 0;
+  text-align: center;
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+</style>