组件渲染过程中发生了错误。
+ {this.state.error && ( +
+
+
+
+
+
+
+
+ {imageIndex + 1}/{ currentGroup?.images?.length }
+
+
+
+
+
+
+
+
+
diff --git a/kotonebot-devtool/src/hooks/useFullscreenSpinner.tsx b/kotonebot-devtool/src/hooks/useFullscreenSpinner.tsx
new file mode 100644
index 0000000..3c16a74
--- /dev/null
+++ b/kotonebot-devtool/src/hooks/useFullscreenSpinner.tsx
@@ -0,0 +1,114 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Spinner } from 'react-bootstrap';
+import styled from '@emotion/styled';
+
+const SpinnerOverlay = styled.div`
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(255, 255, 255, 0.8);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+`;
+
+const SpinnerText = styled.div`
+ margin-top: 1rem;
+ color: #666;
+ font-size: 0.9rem;
+ white-space: pre-wrap;
+`;
+
+interface SpinnerComponentProps {
+ message?: string;
+ show: boolean;
+}
+
+const SpinnerComponent: React.FC
+
+
+
+
+
+
+
+
+
+ 消息框演示
+
+
+ 使用说明：
+-
+
- 点击"是/否对话框"显示带有是/否选项的对话框 +
- 点击"提示对话框"显示只有确定按钮的提示框 +
- 点击"确认/取消对话框"显示带有确认/取消选项的对话框 +
全屏加载动画演示
+
+
+ 使用说明：
+-
+
- 点击按钮显示全屏加载动画，3秒后自动关闭 +
- 加载动画会显示在整个应用的最上层 +
- 可以选择是否显示加载消息 +
单图片查看器演示
+ +
+
+ 使用说明：
+-
+
- 鼠标拖动可移动图片 +
- 鼠标滚轮可缩放图片 +
- 点击"适应"按钮使图片适应容器大小 +
- 点击"重置位置"只重置图片位置 +
- 点击"重置缩放"只重置图片缩放 +
- 点击"完全重置"同时重置位置和缩放 +
多图片查看器演示
+ +
+
+ 使用说明：
+-
+
- 使用工具栏上的按钮或滑块切换图片组 +
- 使用组内导航按钮切换当前组内的图片 +
- 支持键盘快捷键：左右方向键切换组，Home/End 跳转到第一组/最后一组 +
- 可以通过下载按钮下载当前图片组的所有图片 +
- 锁定视图选项可以在切换图片时保持当前的缩放和位置 +
- 所有图片支持鼠标拖动和滚轮缩放 +