Icon

<template>
  <PreviewBlock title="使用 icon 属性">
    <DuIcon :icon="iconRefresh" />
    <DuIcon :icon="iconRefresh" color="primary" />
    <DuIcon :icon="iconRefresh" :size="32" />
    <DuIcon :icon="iconInfoCircle" color="primary" />
    <DuIcon :icon="iconExpress" color="primary" />
  </PreviewBlock>
  <PreviewBlock title="最简例子">
    <DuIcon name="two-column" />
    <DuIcon name="label-related" />
  </PreviewBlock>
  <PreviewBlock title="改变颜色/使用 CSS color 属性">
    <div class="text-blue text-sm">
      <DuIcon name="refresh" class="mr-4px" />
      <span>这是一个图标加文案，都是同一种颜色</span>
    </div>
  </PreviewBlock>
  <PreviewBlock title="改变颜色/直接使用 color 属性">
    <DuIcon name="refresh" color="primary" />
    <DuIcon name="refresh" color="secondary" />
    <DuIcon name="refresh" color="success" />
    <DuIcon name="refresh" color="warning" />
    <DuIcon name="refresh" color="error" />
    <DuIcon name="refresh" color="trade" />
    <DuIcon name="wifi" color="#06b6d4" />
  </PreviewBlock>
  <PreviewBlock title="改变大小">
    <DuIcon name="scanning" :size="32" />
    <DuIcon name="copylink" :size="32" />
  </PreviewBlock>
  <PreviewBlock title="使用图片链接">
    <DuIcon name="https://cdn.qiandaoapp.com/interior/images/3ff45be24f8686698cf75886c5d235e0.svg" />
    <DuIcon name="https://cdn.qiandaoapp.com/interior/images/3ff45be24f8686698cf75886c5d235e0.svg" :size="32" />
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuIcon } from 'dangoui'
import { iconRefresh, iconInfoCircle, iconExpress } from 'dangoui-icon-config'
</script>

<template>
  <PreviewBlock title="所有图标">
    <div class="mb-16px flex items-center gap-12px">
      <DuSearch class="flex-1" placeholder="输入名称搜索图标..." v-model:value="keyword" />
      <div class="flex items-center gap-8px">
        <span class="text-12px text-neutral-500">{{ iconSize }}px</span>
        <input
          type="range"
          min="12"
          max="64"
          :value="iconSize"
          @input="iconSize = Number(($event.target as HTMLInputElement).value)"
          class="w-80px"
        />
      </div>
    </div>

    <div class="grid grid-cols-2 gap-x-16px" style="grid-template-columns: 1fr 1fr;">
      <!-- 线性 -->
      <div>
        <div class="text-11px text-neutral-400 mb-12px pb-8px border-b border-neutral-100">线性({{ linearIcons.length }})</div>
        <div class="grid grid-cols-4 gap-x-2px gap-y-4px">
          <div
            v-for="iconName in linearIcons"
            :key="iconName"
            class="flex flex-col items-center text-neutral-800"
          >
            <DuIcon :name="iconName" :size="iconSize" />
            <div class="mt-6px text-11px line-clamp-1 text-center text-neutral-400">{{ iconName }}</div>
          </div>
        </div>
      </div>

      <!-- 填充 -->
      <div>
        <div class="text-11px text-neutral-400 mb-12px pb-8px border-b border-neutral-100">填充({{ filledIcons.length }})</div>
        <div class="grid grid-cols-4 gap-x-2px gap-y-4px">
          <div
            v-for="iconName in filledIcons"
            :key="iconName"
            class="flex flex-col items-center text-neutral-800"
          >
            <DuIcon :name="iconName" :size="iconSize" />
            <div class="mt-6px text-11px line-clamp-1 text-center text-neutral-400">{{ iconName }}</div>
          </div>
        </div>
      </div>
    </div>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { DuIcon, DuSearch } from 'dangoui'
import iconConfig from 'dangoui/iconfont-config.json'

const keyword = ref('')
const iconSize = ref(16)

// 按 display_order 顺序（echo localStorage 顺序）
const linearIcons = computed(() => {
  const order = iconConfig.display_order?.linear || []
  return order.filter(n => n.includes(keyword.value))
})

const filledIcons = computed(() => {
  const order = iconConfig.display_order?.filled || []
  return order.filter(n => n.includes(keyword.value))
})
</script>