mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-09-21 04:46:26 +00:00
feat(iconify): 注册离线图标集并优化全屏逻辑
This commit is contained in:
@@ -182,7 +182,7 @@ interface Props {
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
fullClass: "fa-table-card",
|
||||
fullClass: "fa-full-height",
|
||||
layout: "search,refresh,size,fullscreen,columns,rowDrag,settings",
|
||||
showSearchBar: undefined,
|
||||
});
|
||||
@@ -293,29 +293,12 @@ const isFullScreen = ref(false);
|
||||
/** 保存原始的 overflow 样式,用于退出全屏时恢复 */
|
||||
const originalOverflow = ref("");
|
||||
|
||||
/**
|
||||
* 查找可全屏的容器元素
|
||||
* 优先取 .fa-table-card 的父级(包含搜索栏 + 表格卡片),其次降级到 fullClass
|
||||
*/
|
||||
const findFullscreenContainer = (): HTMLElement | null => {
|
||||
const headerEl = document.getElementById("fa-table-header");
|
||||
if (headerEl) {
|
||||
const card = headerEl.closest(`.${props.fullClass}`);
|
||||
if (card?.parentElement) {
|
||||
// 取父级 — 通常包裹了搜索栏 + 表格卡片
|
||||
return card.parentElement as HTMLElement;
|
||||
}
|
||||
if (card) return card as HTMLElement;
|
||||
}
|
||||
return document.querySelector(`.${props.fullClass}`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 切换全屏状态
|
||||
* 进入全屏时会隐藏页面滚动条,退出时恢复原状态
|
||||
*/
|
||||
const toggleFullScreen = () => {
|
||||
const el = findFullscreenContainer();
|
||||
const el = document.querySelector(`.${props.fullClass}`);
|
||||
if (!el) return;
|
||||
|
||||
isFullScreen.value = !isFullScreen.value;
|
||||
@@ -357,7 +340,7 @@ onUnmounted(() => {
|
||||
// 如果组件在全屏状态下被卸载,恢复页面滚动状态
|
||||
if (isFullScreen.value) {
|
||||
document.body.style.overflow = originalOverflow.value;
|
||||
const el = findFullscreenContainer();
|
||||
const el = document.querySelector(`.${props.fullClass}`);
|
||||
if (el) {
|
||||
el.classList.remove("el-full-screen");
|
||||
}
|
||||
|
||||
@@ -71,7 +71,7 @@ const fastEnterConfig: FastEnterConfig = {
|
||||
iconColor: "#38C0FC",
|
||||
enabled: true,
|
||||
order: 7,
|
||||
routeName: "ChangeLog",
|
||||
routeName: "FastlinkChangeLog",
|
||||
},
|
||||
{
|
||||
name: "操作手册",
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* 本地注册 Iconify 图标集,实现离线显示(不再从 CDN 加载)
|
||||
*/
|
||||
import { addCollection } from "@iconify/vue";
|
||||
import ri from "@iconify-json/ri/icons.json";
|
||||
import svgSpinners from "@iconify-json/svg-spinners/icons.json";
|
||||
import lineMd from "@iconify-json/line-md/icons.json";
|
||||
|
||||
export function initIconify(): void {
|
||||
addCollection(ri);
|
||||
addCollection(svgSpinners);
|
||||
addCollection(lineMd);
|
||||
}
|
||||
@@ -18,6 +18,7 @@ import { initErrorHandle } from "@utils/sys";
|
||||
import { initCodeMirror } from "./codemirror";
|
||||
import { initElementPlus } from "./element-plus";
|
||||
import { initElIcons } from "./icons";
|
||||
import { initIconify } from "./iconify";
|
||||
import { initTerminal } from "./terminal";
|
||||
|
||||
/**
|
||||
@@ -35,6 +36,7 @@ import { initTerminal } from "./terminal";
|
||||
*/
|
||||
export async function initPlugins(app: App<Element>): Promise<void> {
|
||||
initElIcons(app);
|
||||
initIconify();
|
||||
initStore(app);
|
||||
await initRouter(app);
|
||||
initGlobDirectives(app);
|
||||
|
||||
Reference in New Issue
Block a user