fix: 修复菜单图标选择器公网依赖和空白显示

- 使用本地 Iconify 图标数据并补齐菜单常用图标

- 修复未知图标降级和弹出层触发器结构
This commit is contained in:
2026-07-21 14:40:47 +08:00
parent 791649c7d5
commit 4c28eaf393
8 changed files with 198 additions and 69 deletions

View File

@@ -26,7 +26,7 @@ import { isFunction } from '@easyflow-core/shared/utils';
import { objectOmit, refDebounced, watchDebounced } from '@vueuse/core';
import { fetchIconsData } from './icons';
import { getLocalIconsData } from './icons';
interface Props {
pageSize?: number;
@@ -107,7 +107,7 @@ watchDebounced(
'svg:user-feedback',
'svg:oauth',
'svg:mcp',
...(await fetchIconsData(prefix)),
...getLocalIconsData(prefix),
];
}
},
@@ -215,6 +215,7 @@ defineExpose({ toggleOpenState, open, close });
:content-props="{ align: 'end', alignOffset: -11, sideOffset: 8 }"
content-class="p-0 pt-3 w-full"
trigger-class="w-full"
trigger-as-child
>
<template #trigger>
<template v-if="props.type === 'input'">
@@ -233,6 +234,7 @@ defineExpose({ toggleOpenState, open, close });
<EasyFlowIcon
:icon="currentSelect || Grip"
class="size-4"
fallback
aria-hidden="true"
/>
</template>
@@ -250,6 +252,7 @@ defineExpose({ toggleOpenState, open, close });
<EasyFlowIcon
:icon="currentSelect || Grip"
class="absolute right-1 top-1 size-6"
fallback
aria-hidden="true"
/>
</div>
@@ -258,6 +261,7 @@ defineExpose({ toggleOpenState, open, close });
:icon="currentSelect || Grip"
v-else
class="size-4"
fallback
v-bind="$attrs"
/>
</template>
@@ -289,6 +293,7 @@ defineExpose({ toggleOpenState, open, close });
'text-primary transition-all': currentSelect === item,
}"
:icon="item"
fallback
/>
</EasyFlowIconButton>
</div>

View File

@@ -1,59 +1,21 @@
import type { Recordable } from '@easyflow/types';
import uncategorized from './uncategorized';
import { listIcons } from '@easyflow/icons';
/**
* 一个缓存对象,在不刷新页面时,无需重复请求远程接口
* 本地可用图标的缓存对象。
*/
export const ICONS_MAP: Recordable<string[]> = {};
// interface IconifyResponse {
// prefix: string;
// total: number;
// title: string;
// uncategorized?: string[];
// categories?: Recordable<string[]>;
// aliases?: Recordable<string>;
// }
const PENDING_REQUESTS: Recordable<Promise<string[]>> = {};
/**
* 通过Iconify接口获取图标集数据。
* 同一时间多个图标选择器同时请求同一个图标集时,实际上只会发起一次请求(所有请求共享同一份结果)。
* 请求结果会被缓存,刷新页面前同一个图标集不会再次请求
* 获取本地已注册的图标集数据。
* @param prefix 图标集名称
* @returns 图标集中包含的所有图标名称
*/
export async function fetchIconsData(prefix: string): Promise<string[]> {
export function getLocalIconsData(prefix: string): string[] {
if (Reflect.has(ICONS_MAP, prefix) && ICONS_MAP[prefix]) {
return ICONS_MAP[prefix];
}
if (Reflect.has(PENDING_REQUESTS, prefix) && PENDING_REQUESTS[prefix]) {
return PENDING_REQUESTS[prefix];
}
PENDING_REQUESTS[prefix] = (async () => {
try {
// const controller = new AbortController();
// const timeoutId = setTimeout(() => controller.abort(), 1000 * 10);
// const response: IconifyResponse = await fetch(
// `https://api.iconify.design/collection?prefix=${prefix}`,
// { signal: controller.signal },
// ).then((res) => res.json());
// clearTimeout(timeoutId);
// const list = response.uncategorized || [];
// if (response.categories) {
// for (const category in response.categories) {
// list.push(...(response.categories[category] || []));
// }
// }
// ICONS_MAP[prefix] = list.map((v) => `${prefix}:${v}`);
ICONS_MAP[prefix] = uncategorized.map((v) => `${prefix}:${v}`);
} catch (error) {
console.error(`Failed to fetch icons for prefix ${prefix}:`, error);
return [] as string[];
}
return ICONS_MAP[prefix];
})();
return PENDING_REQUESTS[prefix];
ICONS_MAP[prefix] = listIcons('', prefix);
return ICONS_MAP[prefix];
}