af-mobile-client-vue3 1.1.5 → 1.1.7

package/src/views/component/IconifyView/index.vue

@@ -0,0 +1,507 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import {
+  Cell as VanCell,
+  CellGroup as VanCellGroup,
+  Col as VanCol,
+  Divider as VanDivider,
+  Field as VanField,
+  Grid as VanGrid,
+  GridItem as VanGridItem,
+  NavBar as VanNavBar,
+  Row as VanRow,
+  Tab as VanTab,
+  Tabs as VanTabs,
+} from 'vant'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const searchKeyword = ref('')
+const activeTab = ref(0)
+
+// 图标分类展示
+const iconCategories = [
+  {
+    title: '常用图标',
+    icons: [
+      { name: 'mdi:home', label: '首页' },
+      { name: 'mdi:account', label: '用户' },
+      { name: 'mdi:bell', label: '通知' },
+      { name: 'mdi:cog', label: '设置' },
+      { name: 'mdi:magnify', label: '搜索' },
+      { name: 'mdi:plus', label: '添加' },
+      { name: 'mdi:check', label: '确认' },
+      { name: 'mdi:close', label: '关闭' },
+    ],
+  },
+  {
+    title: '方向图标',
+    icons: [
+      { name: 'mdi:arrow-up', label: '向上' },
+      { name: 'mdi:arrow-right', label: '向右' },
+      { name: 'mdi:arrow-down', label: '向下' },
+      { name: 'mdi:arrow-left', label: '向左' },
+      { name: 'mdi:chevron-up', label: '上箭头' },
+      { name: 'mdi:chevron-right', label: '右箭头' },
+      { name: 'mdi:chevron-down', label: '下箭头' },
+      { name: 'mdi:chevron-left', label: '左箭头' },
+    ],
+  },
+  {
+    title: '文件图标',
+    icons: [
+      { name: 'mdi:file', label: '文件' },
+      { name: 'mdi:file-document', label: '文档' },
+      { name: 'mdi:file-excel', label: 'Excel' },
+      { name: 'mdi:file-pdf', label: 'PDF' },
+      { name: 'mdi:file-image', label: '图片' },
+      { name: 'mdi:file-video', label: '视频' },
+      { name: 'mdi:file-music', label: '音频' },
+      { name: 'mdi:folder', label: '文件夹' },
+    ],
+  },
+  {
+    title: '通信图标',
+    icons: [
+      { name: 'mdi:email', label: '邮件' },
+      { name: 'mdi:phone', label: '电话' },
+      { name: 'mdi:message', label: '消息' },
+      { name: 'mdi:chat', label: '聊天' },
+      { name: 'mdi:wifi', label: 'WiFi' },
+      { name: 'mdi:bluetooth', label: '蓝牙' },
+      { name: 'mdi:share', label: '分享' },
+      { name: 'mdi:cloud', label: '云' },
+    ],
+  },
+]
+
+// UnoCSS图标示例
+const unocssIcons = [
+  { name: 'i-mdi:home', label: '首页' },
+  { name: 'i-mdi:account', label: '用户' },
+  { name: 'i-mdi:bell', label: '通知' },
+  { name: 'i-mdi:cog', label: '设置' },
+  { name: 'i-mdi:magnify', label: '搜索' },
+  { name: 'i-mdi:plus', label: '添加' },
+  { name: 'i-mdi:check', label: '确认' },
+  { name: 'i-mdi:close', label: '关闭' },
+  { name: 'i-mdi:arrow-up', label: '向上' },
+  { name: 'i-mdi:arrow-right', label: '向右' },
+  { name: 'i-mdi:arrow-down', label: '向下' },
+  { name: 'i-mdi:arrow-left', label: '向左' },
+]
+
+// 样式设置示例
+const styleExamples = [
+  { name: 'mdi:home', label: '默认样式', style: {} },
+  { name: 'mdi:home', label: '大尺寸', style: { fontSize: '32px' } },
+  { name: 'mdi:home', label: '自定义颜色', style: { color: '#1989fa' } },
+  { name: 'mdi:home', label: '旋转效果', style: { transform: 'rotate(45deg)' } },
+  { name: 'mdi:home', label: '背景填充', style: { backgroundColor: '#eee', padding: '5px', borderRadius: '4px' } },
+  { name: 'mdi:home', label: '悬停效果', class: 'hover-effect', style: {} },
+]
+
+// UnoCSS样式设例
+const unocssStyleExamples = [
+  { name: 'i-mdi:home', label: '默认样式', classes: '' },
+  { name: 'i-mdi:home', label: '大尺寸 (text-3xl)', classes: 'text-3xl' },
+  { name: 'i-mdi:home', label: '自定义颜色 (text-blue-500)', classes: 'text-blue-500' },
+  { name: 'i-mdi:home', label: '旋转效果 (transform rotate-45)', classes: 'transform rotate-45' },
+  { name: 'i-mdi:home', label: '背景填充 (bg-gray-200 p-1 rounded)', classes: 'bg-gray-200 p-1 rounded' },
+  { name: 'i-mdi:home', label: '悬停效果 (hover:scale-125)', classes: 'transition hover:scale-125' },
+]
+
+// 使用方法示例代码
+const usageExamples = [
+  {
+    title: '基本使用',
+    code: '<Icon icon="mdi:home" />',
+  },
+  {
+    title: '设置尺寸',
+    code: '<Icon icon="mdi:home" :width="24" :height="24" />',
+  },
+  {
+    title: '自定义样式',
+    code: '<Icon icon="mdi:home" style="color: red; font-size: 24px;" />',
+  },
+  {
+    title: '内联样式',
+    code: '<Icon icon="mdi:home" :style="{ color: \'#1989fa\', fontSize: \'24px\' }" />',
+  },
+  {
+    title: '自定义类名',
+    code: '<Icon icon="mdi:home" class="custom-icon" />',
+  },
+]
+
+// UnoCSS使用方法示例代码
+const unocssUsageExamples = [
+  {
+    title: '基本使用',
+    code: '<div class="i-mdi:home"></div>',
+  },
+  {
+    title: '设置尺寸',
+    code: '<div class="i-mdi:home text-2xl"></div>',
+  },
+  {
+    title: '自定义颜色',
+    code: '<div class="i-mdi:home text-red-500"></div>',
+  },
+  {
+    title: '添加多个样式',
+    code: '<div class="i-mdi:home p-1 bg-gray-100 rounded text-blue-500"></div>',
+  },
+  {
+    title: '交互效果',
+    code: '<div class="i-mdi:home transition hover:text-green-500 hover:scale-125"></div>',
+  },
+]
+
+// 过滤显示的图标
+const filteredCategories = computed(() => {
+  if (!searchKeyword.value) {
+    return iconCategories
+  }
+
+  return iconCategories.map((category) => {
+    const filteredIcons = category.icons.filter(icon =>
+      icon.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
+      || icon.label.toLowerCase().includes(searchKeyword.value.toLowerCase()),
+    )
+
+    return {
+      ...category,
+      icons: filteredIcons,
+    }
+  }).filter(category => category.icons.length > 0)
+})
+
+// 过滤UnoCSS图标
+const filteredUnocssIcons = computed(() => {
+  if (!searchKeyword.value) {
+    return unocssIcons
+  }
+
+  return unocssIcons.filter(icon =>
+    icon.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
+    || icon.label.toLowerCase().includes(searchKeyword.value.toLowerCase()),
+  )
+})
+</script>
+
+<template>
+  <div class="iconify-view">
+    <VanNavBar
+      title="Iconify 图标使用示例"
+      left-arrow
+      @click-left="router.back()"
+    />
+
+    <div class="container">
+      <section class="intro-section">
+        <h2>Iconify 图标使用</h2>
+        <p>
+          Iconify 是一个开源的图标框架，提供超过 100,000 个开源图标。在本项目中有两种使用方式：
+        </p>
+      </section>
+
+      <VanTabs v-model:active="activeTab" animated>
+        <VanTab title="@iconify/vue 组件">
+          <section class="intro-section">
+            <p>
+              使用 @iconify/vue 提供的 Icon 组件可以直接在模板中渲染图标。
+            </p>
+          </section>
+
+          <section class="icons-section">
+            <div v-for="(category, index) in filteredCategories" :key="index" class="icon-category">
+              <h3>{{ category.title }}</h3>
+              <VanGrid :column-num="4" :border="false">
+                <VanGridItem v-for="(icon, iconIndex) in category.icons" :key="iconIndex">
+                  <div class="icon-item">
+                    <Icon :icon="icon.name" width="28" height="28" />
+                    <div class="icon-label">
+                      {{ icon.label }}
+                    </div>
+                    <div class="icon-name">
+                      {{ icon.name }}
+                    </div>
+                  </div>
+                </VanGridItem>
+              </VanGrid>
+            </div>
+          </section>
+
+          <VanDivider />
+
+          <section class="style-section">
+            <h3>样式自定义示例</h3>
+            <VanGrid :column-num="3" :border="false">
+              <VanGridItem v-for="(example, index) in styleExamples" :key="index">
+                <div class="style-example">
+                  <Icon
+                    :icon="example.name"
+                    width="28"
+                    height="28"
+                    :style="example.style"
+                    :class="example.class"
+                  />
+                  <div class="style-label">
+                    {{ example.label }}
+                  </div>
+                </div>
+              </VanGridItem>
+            </VanGrid>
+          </section>
+
+          <VanDivider />
+
+          <section class="usage-section">
+            <h3>使用方法</h3>
+            <VanCellGroup inset>
+              <VanCell v-for="(example, index) in usageExamples" :key="index" :title="example.title">
+                <template #value>
+                  <code class="code-example">{{ example.code }}</code>
+                </template>
+              </VanCell>
+            </VanCellGroup>
+          </section>
+
+          <section class="usage-guide">
+            <h3>使用指南</h3>
+            <div class="guide-content">
+              <h4>1. 安装</h4>
+              <code class="code-block">npm install @iconify/vue</code>
+
+              <h4>2. 导入</h4>
+              <code class="code-block">import { Icon } from '@iconify/vue'</code>
+
+              <h4>3. 在模板中使用</h4>
+              <code class="code-block">&lt;Icon icon="mdi:home" /&gt;</code>
+            </div>
+          </section>
+        </VanTab>
+
+        <VanTab title="UnoCSS 图标类">
+          <section class="intro-section">
+            <p>
+              使用 UnoCSS 的图标预设，可以通过类名直接使用图标，无需导入组件。
+            </p>
+          </section>
+
+          <VanDivider />
+
+          <section class="style-section">
+            <h3>样式自定义示例</h3>
+            <VanGrid :column-num="3" :border="false">
+              <VanGridItem v-for="(example, index) in unocssStyleExamples" :key="index">
+                <div class="style-example">
+                  <div :class="`${example.name} ${example.classes}`" />
+                  <div class="style-label">
+                    {{ example.label }}
+                  </div>
+                </div>
+              </VanGridItem>
+            </VanGrid>
+          </section>
+
+          <VanDivider />
+
+          <section class="usage-section">
+            <h3>使用方法</h3>
+            <VanCellGroup inset>
+              <VanCell v-for="(example, index) in unocssUsageExamples" :key="index" :title="example.title">
+                <template #value>
+                  <code class="code-example">{{ example.code }}</code>
+                </template>
+              </VanCell>
+            </VanCellGroup>
+          </section>
+
+          <section class="usage-guide">
+            <h3>使用指南</h3>
+            <div class="guide-content">
+              <h4>项目配置</h4>
+              <p>本项目已通过 Vite 配置了 UnoCSS 的图标预设：</p>
+              <code class="code-block">
+                {{ `
+                // build/vite/index.ts
+                UnoCSS({
+                    presets: [
+                        presetIcons({
+                        scale: 1.2,
+                            warn: true,
+                            extraProperties: {
+                                'display': 'inline-block',
+                                'vertical-align': 'middle',
+                            // ...
+                            },
+                        }),
+                    ],
+                }),
+               ` }}
+              </code>
+
+              <h4>使用方式</h4>
+              <p>直接在 HTML 元素上使用图标类名，格式为：<code>i-{collection}:{name}</code></p>
+              <code class="code-block">&lt;div class="i-mdi:home"&gt;&lt;/div&gt;</code>
+
+              <h4>结合其他 UnoCSS 类</h4>
+              <p>可以结合 UnoCSS 的其他工具类设置图标样式：</p>
+              <code class="code-block">&lt;div class="i-mdi:home text-blue-500 text-2xl"&gt;&lt;/div&gt;</code>
+            </div>
+          </section>
+        </VanTab>
+      </VanTabs>
+
+      <VanDivider />
+
+      <section class="usage-guide">
+        <h3>图标集</h3>
+        <div class="guide-content">
+          <p>Iconify 支持多个图标集，格式为 "集合名:图标名"。例如：</p>
+          <ul>
+            <li>mdi:home - Material Design Icons</li>
+            <li>fa:user - Font Awesome</li>
+            <li>carbon:settings - Carbon</li>
+            <li>更多图标集可访问 <a href="https://icon-sets.iconify.design/" target="_blank">Iconify Icon Sets</a></li>
+          </ul>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.iconify-view {
+  background-color: #f7f8fa;
+  min-height: 100vh;
+
+  .container {
+    padding: var(--base-interval-2);
+  }
+
+  .intro-section,
+  .icons-section,
+  .style-section,
+  .usage-section,
+  .usage-guide {
+    margin-bottom: 20px;
+  }
+
+  h2 {
+    font-size: 20px;
+    margin-bottom: 12px;
+    color: #323233;
+  }
+
+  h3 {
+    font-size: 16px;
+    margin-bottom: 12px;
+    color: #323233;
+    padding-left: 12px;
+  }
+
+  h4 {
+    font-size: 14px;
+    margin: 12px 0 8px;
+    color: #323233;
+  }
+
+  p {
+    font-size: 14px;
+    color: #646566;
+    line-height: 1.5;
+  }
+
+  .icon-category {
+    margin-bottom: 16px;
+  }
+
+  .icon-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px 0;
+  }
+
+  .icon-label {
+    margin-top: 8px;
+    font-size: 12px;
+    color: #323233;
+  }
+
+  .icon-name {
+    margin-top: 4px;
+    font-size: 10px;
+    color: #969799;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 90%;
+  }
+
+  .style-example {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px 0;
+  }
+
+  .style-label {
+    margin-top: 8px;
+    font-size: 12px;
+    color: #323233;
+  }
+
+  .code-example {
+    font-size: 12px;
+    color: #333;
+    background-color: #f5f5f5;
+    padding: 2px 4px;
+    border-radius: 2px;
+    overflow-wrap: break-word;
+    word-break: break-all;
+  }
+
+  .code-block {
+    display: block;
+    font-size: 12px;
+    color: #333;
+    background-color: #f5f5f5;
+    padding: 8px 12px;
+    border-radius: 4px;
+    margin: 8px 0;
+    overflow-x: auto;
+  }
+
+  .guide-content {
+    background-color: white;
+    padding: 16px;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  }
+
+  .guide-content ul {
+    padding-left: 16px;
+    margin: 8px 0;
+  }
+
+  .guide-content li {
+    font-size: 13px;
+    color: #646566;
+    line-height: 1.6;
+  }
+
+  .hover-effect {
+    transition: transform 0.3s ease;
+
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+}
+</style>