Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
682a53a8 1 parent a285b674

feat(图标): 添加 Iconify 图标库支持并创建测试页面 

添加 @iconify/vue 依赖并全局注册组件
创建图标测试页面用于验证不同图标库的使用体验
添加相关测试用例确保组件正常导入
Inline Side-by-side
Showing 7 changed files with 166 additions and 7 deletions
......@@ -26,6 +26,7 @@
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/vue-fontawesome": "^3.0.5",
"@heroicons/vue": "^2.2.0",
"@iconify/vue": "^5.0.0",
"@sunsetglow/vue-pdf-viewer": "^0.3.67",
"@vant/touch-emulator": "^1.4.0",
"@vant/use": "^1.6.0",
......
......@@ -20,6 +20,9 @@ importers:
'@heroicons/vue':
specifier: ^2.2.0
version: 2.2.0(vue@3.5.25)
'@iconify/vue':
specifier: ^5.0.0
version: 5.0.0(vue@3.5.25)
'@sunsetglow/vue-pdf-viewer':
specifier: ^0.3.67
version: 0.3.72(vite@6.4.1(@types/node@20.19.25)(jiti@1.21.7)(less@4.4.2))
......@@ -460,6 +463,14 @@ packages:
peerDependencies:
vue: '>= 3'
'@iconify/types@2.0.0':
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
'@iconify/vue@5.0.0':
resolution: {integrity: sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==}
peerDependencies:
vue: '>=3'
'@jridgewell/gen-mapping@0.3.13':
resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
......@@ -2414,6 +2425,13 @@ snapshots:
dependencies:
vue: 3.5.25
'@iconify/types@2.0.0': {}
'@iconify/vue@5.0.0(vue@3.5.25)':
dependencies:
'@iconify/types': 2.0.0
vue: 3.5.25
'@jridgewell/gen-mapping@0.3.13':
dependencies:
'@jridgewell/sourcemap-codec': 1.5.5
......
/*
* @Date: 2025-03-20 20:36:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-12-10 11:50:37
* @LastEditTime: 2025-12-27 22:06:35
* @FilePath: /mlaj/src/main.js
* @Description: 文件描述
*/
......@@ -17,6 +17,7 @@ import '@vant/touch-emulator';
import { library } from '@fortawesome/fontawesome-svg-core'
/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { Icon as IconifyIcon } from '@iconify/vue'
/* import specific icons */
import { faCirclePause, faCirclePlay, faPlay, faPause, faBackwardStep, faForwardStep, faVolumeUp, faRedo, faRepeat, faList, faChevronDown, faVolumeOff, faXmark, faFileAlt, faTimes, faEye, faFilePdf, faExternalLinkAlt, faSpinner, faExclamationCircle, faDownload, faVenus, faMars, faMagnifyingGlassPlus, faMagnifyingGlassMinus } from '@fortawesome/free-solid-svg-icons'
......@@ -31,13 +32,13 @@ if (!Array.prototype.at) {
return this[n];
};
}
const app = createApp(App)
app.component('Icon', IconifyIcon)
app.component('font-awesome-icon', FontAwesomeIcon)
// 屏蔽警告信息
app.config.warnHandler = () => null;
app.config.globalProperties.$http = axios; // 关键语句
app.component('font-awesome-icon', FontAwesomeIcon)
/**
* @function restoreHashAfterOAuth
* @description 前端复原 OAuth 回跳的 hash 路由位置：当 URL 中存在 ret_hash 参数且当前无 hash 时，将其拼回地址栏。
......@@ -55,6 +56,7 @@ function restoreHashAfterOAuth() {
window.history.replaceState(null, '', new_url);
}
}
void restoreHashAfterOAuth
// 在安装路由前进行一次 hash 复原，确保初始路由正确
// restoreHashAfterOAuth()
......
/*
* @Date: 2025-03-20 20:36:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-12-24 10:58:25
* @LastEditTime: 2025-12-27 22:18:08
* @FilePath: /mlaj/src/router/routes.js
* @Description: 路由地址映射配置
*/
......@@ -248,6 +248,12 @@ export const routes = [
meta: { title: 'test' },
},
{
path: '/test/icon',
name: 'IconTest',
component: () => import('../views/IconTestPage.vue'),
meta: { title: 'Icon测试' },
},
{
path: '/animation',
name: 'animation',
component: () => import('../views/animation.vue'),
......
import { describe, expect, it } from 'vitest'
import { Icon } from '@iconify/vue'
describe('iconify', () => {
it('Icon 组件可以被正常导入', () => {
expect(Icon).toBeTruthy()
})
})
<template>
<div class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50 p-4">
<div class="mx-auto max-w-3xl">
<div class="flex items-center justify-between">
<div>
<div class="text-xl font-bold text-slate-900">图标库测试</div>
<div class="mt-1 text-sm text-slate-600">在本页验证 Iconify 的使用体验与渲染效果</div>
</div>
<div class="flex items-center gap-3">
<van-icon name="apps-o" size="22" class="text-slate-700" />
<font-awesome-icon icon="eye" class="text-slate-700" />
</div>
</div>
<div class="mt-4 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div class="flex-1">
<div class="text-sm font-medium text-slate-800">Iconify 图标名</div>
<div class="mt-2 flex items-center gap-2">
<input
v-model="icon_name"
type="text"
class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm outline-none focus:border-slate-400"
placeholder="例如：mdi:home / lucide:camera / solar:heart-bold"
/>
<button
type="button"
class="shrink-0 rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50"
@click="resetIcon"
>
重置
</button>
</div>
</div>
<div class="flex gap-4">
<div class="w-28">
<div class="text-sm font-medium text-slate-800">大小</div>
<input v-model.number="icon_size" type="range" min="16" max="64" class="mt-3 w-full" />
<div class="mt-1 text-xs text-slate-500">{{ icon_size }}px</div>
</div>
<div class="w-28">
<div class="text-sm font-medium text-slate-800">颜色</div>
<input v-model="icon_color" type="color" class="mt-2 h-9 w-full rounded-md border border-slate-200 bg-white" />
</div>
</div>
</div>
<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
<div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
<div class="text-sm font-medium text-slate-800">Iconify（推荐）</div>
<div class="mt-3 flex items-center gap-3">
<Icon :icon="icon_name" :style="{ fontSize: icon_size + 'px', color: icon_color }" />
<div class="text-xs text-slate-600">
<div class="font-mono">{{ icon_name }}</div>
<div class="mt-1">按需加载 SVG，无需手动挑选图标包</div>
</div>
</div>
</div>
<div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
<div class="text-sm font-medium text-slate-800">Vant / FontAwesome（对比）</div>
<div class="mt-3 flex items-center gap-4">
<div class="flex items-center gap-2">
<van-icon name="star-o" :size="icon_size" :color="icon_color" />
<div class="text-xs text-slate-600">van-icon</div>
</div>
<div class="flex items-center gap-2">
<font-awesome-icon icon="star" :style="{ fontSize: icon_size + 'px', color: icon_color }" />
<div class="text-xs text-slate-600">fa</div>
</div>
</div>
</div>
</div>
<div class="mt-4 rounded-xl border border-slate-200 bg-white p-4">
<div class="text-sm font-medium text-slate-800">常用图标示例</div>
<div class="mt-3 grid grid-cols-3 gap-3 sm:grid-cols-6">
<button
v-for="item in quick_icons"
:key="item"
type="button"
class="flex flex-col items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-2 py-3 hover:bg-slate-100"
@click="icon_name = item"
>
<Icon :icon="item" class="text-slate-800" style="font-size: 26px;" />
<div class="w-full truncate text-[11px] text-slate-600">{{ item }}</div>
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const icon_name = ref('mdi:home')
const icon_size = ref(32)
const icon_color = ref('#0f172a')
const quick_icons = [
'mdi:home',
'mdi:account',
'mdi:bell-outline',
'mdi:qrcode-scan',
'lucide:camera',
'lucide:search',
'solar:heart-bold',
'solar:cart-3-bold',
'tabler:settings',
'tabler:share',
'ri:wechat-fill',
'ph:download-simple-bold'
]
const resetIcon = () => {
icon_name.value = 'mdi:home'
icon_size.value = 32
icon_color.value = '#0f172a'
}
</script>
<style scoped></style>
<!--
* @Date: 2025-12-18 00:22:07
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-12-22 14:01:23
* @LastEditTime: 2025-12-27 22:17:50
* @FilePath: /mlaj/src/views/test.vue
* @Description: 文件描述
-->
......@@ -9,7 +9,6 @@
<button @click="setVolume">设置音量</button>
<audio ref="audioRef" src="https://img.tukuppt.com/newpreview_music/09/03/95/5c8af46b01eb138909.mp3"></audio>
<!-- 使用封装的星空背景组件 -->
<StarryBackground bgImage="https://cdn.ipadbiz.cn/mlaj/images/test-bgg03.jpg" />
</template>
......@@ -21,7 +20,6 @@ const audioRef = ref(null);
const setVolume = async () => {
try {
// 激活音频上下文
await audioRef.value.play();
if (typeof WeixinJSBridge !== 'undefined') {
WeixinJSBridge.invoke('setAudioVolume', { volume: 0.5 }, (res) => {
......