feat: 添加FPS插件，显示帧率

src/plugins/fps/export_hide.ts

@@ -0,0 +1,25 @@
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import hideFps from './hideFps'
+import { EyeOffOutline } from '@vicons/ionicons5'
+import { PluginExportType } from '@/types/type'
+import { shallowRef } from 'vue'
+import { fpsElement } from './shared'
+
+const pluginConfig: Plugin = {
+   name: '隐藏FPS',
+   icon: shallowRef(EyeOffOutline),
+   filter: () => {
+      // 只有当FPS显示元素存在时才显示此按钮
+      return fpsElement.value !== null
+   },
+   disable: false,
+   group: [PluginGroup.mainMenu],
+   func: hideFps,
+   priority: 0
+}
+
+export default pluginConfig
+
+export const type = PluginExportType.default
+
+export const key = 'hideFps' 

src/plugins/fps/export_show.ts

@@ -0,0 +1,24 @@
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import showFps from './showFps'
+import { SpeedometerOutline } from '@vicons/ionicons5'
+import { PluginExportType } from '@/types/type'
+import { shallowRef } from 'vue'
+import { fpsElement } from './shared'
+
+const pluginConfig: Plugin = {
+   name: '显示FPS',
+   icon: shallowRef(SpeedometerOutline),
+   filter: () => {
+      return fpsElement.value === null
+   },
+   disable: false,
+   group: [PluginGroup.mainMenu],
+   func: showFps,
+   priority: 0
+}
+
+export default pluginConfig
+
+export const type = PluginExportType.default
+
+export const key = 'showFps' 

src/plugins/fps/hideFps.ts

@@ -0,0 +1,18 @@
+// 引入共享变量
+import { fpsElement, animationFrameId, setFpsElement, setAnimationFrameId } from '../fps/shared';
+
+const hideFps = () => {
+  // 停止帧率计算
+  if (animationFrameId.value !== null) {
+    cancelAnimationFrame(animationFrameId.value);
+    setAnimationFrameId(null);
+  }
+  
+  // 移除FPS显示元素
+  if (fpsElement.value) {
+    document.body.removeChild(fpsElement.value);
+    setFpsElement(null);
+  }
+};
+
+export default hideFps; 

src/plugins/fps/hideFpsExport.ts

@@ -0,0 +1,25 @@
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import hideFps from './hideFps'
+import { EyeOffOutline } from '@vicons/ionicons5'
+import { PluginExportType } from '@/types/type'
+import { shallowRef } from 'vue'
+import { fpsElement } from '../fps/shared'
+
+const pluginConfig: Plugin = {
+   name: '隐藏FPS',
+   icon: shallowRef(EyeOffOutline),
+   filter: () => {
+      // 只有当FPS显示元素存在时才显示此按钮
+      return fpsElement.value !== null
+   },
+   disable: false,
+   group: [PluginGroup.mainMenu],
+   func: hideFps,
+   priority: 0
+}
+
+export default pluginConfig
+
+export const type = PluginExportType.default
+
+export const key = 'hideFps' 

src/plugins/fps/index.ts

@@ -0,0 +1,5 @@
+export * from './shared';
+export { default as showFps } from './showFps';
+export { default as hideFps } from './hideFps';
+export { default as showFpsPlugin } from './export_show';
+export { default as hideFpsPlugin } from './export_hide'; 

src/plugins/fps/shared.ts

@@ -0,0 +1,14 @@
+import { shallowRef } from 'vue';
+
+// 使用shallowRef包装状态
+export const fpsElement = shallowRef<HTMLDivElement | null>(null);
+export const animationFrameId = shallowRef<number | null>(null);
+
+// 更新设置函数
+export const setFpsElement = (el: HTMLDivElement | null) => {
+  fpsElement.value = el;
+};
+
+export const setAnimationFrameId = (id: number | null) => {
+  animationFrameId.value = id;
+}; 

src/plugins/fps/showFps.ts

@@ -0,0 +1,57 @@
+import { fpsElement, setFpsElement, setAnimationFrameId } from '../fps/shared';
+
+// const frameArr = new Array<number>(0)
+let lastTime: number = 0
+
+const createFpsElement = () => {
+    const el = document.createElement('div');
+    el.style.position = 'fixed';
+    el.style.top = '10px';
+    el.style.left = '10px';
+    el.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
+    el.style.pointerEvents = 'none';
+    el.style.userSelect = 'none';
+    el.style.color = 'green';
+    el.style.padding = '5px 10px';
+    el.style.borderRadius = '4px';
+    el.style.fontFamily = 'monospace';
+    el.style.fontSize = '14px';
+    el.style.zIndex = '9999';
+    document.body.appendChild(el);
+    return el;
+};
+
+const calculateFps = () => {
+    // const range = 1000
+    // const curr = new Date()
+    // frameArr.push(curr.getTime())
+    // while (frameArr[0] < curr.getTime() - range) {
+    //     frameArr.shift()
+    // }
+    // const fps = Math.floor(frameArr.length / range * 1000)
+    // if (fpsElement.value) {
+    //     fpsElement.value.textContent = `FPS: ${fps}`;
+    // }
+    // const id = requestAnimationFrame(calculateFps);
+    // setAnimationFrameId(id);
+    const curr = new Date()
+    const fps = Math.floor(1000 / (curr.getTime() - lastTime))
+    if (fpsElement.value && lastTime !== 0) {
+        fpsElement.value.textContent = `FPS: ${fps}`;
+    }
+    lastTime = curr.getTime()
+    const id = requestAnimationFrame(calculateFps);
+    setAnimationFrameId(id);
+};
+
+const showFps = () => {
+    if (fpsElement.value) return;
+
+    const el = createFpsElement();
+    setFpsElement(el);
+
+    const id = requestAnimationFrame(calculateFps);
+    setAnimationFrameId(id);
+};
+
+export default showFps;