+
+ );
+};
+
+export default WeatherComponent;
diff --git a/apps/react-agent-ui/src/components/ZipModelViewer/index.scss b/apps/react-agent-ui/src/components/ZipModelViewer/index.scss
new file mode 100644
index 0000000..56e7862
--- /dev/null
+++ b/apps/react-agent-ui/src/components/ZipModelViewer/index.scss
@@ -0,0 +1,58 @@
+.zip-model-viewer-container {
+ position: relative;
+
+ .zip-model-viewer-loading {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: rgba(255, 255, 255, 0.7);
+ z-index: 10;
+
+ .loading-spinner {
+ width: 40px;
+ height: 40px;
+ border: 4px solid rgba(0, 0, 0, 0.1);
+ border-radius: 50%;
+ border-top-color: #3498db;
+ animation: spin 1s ease-in-out infinite;
+ margin-bottom: 10px;
+ }
+
+ span {
+ font-size: 14px;
+ color: #333;
+ }
+ }
+
+ .zip-model-viewer-error {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: rgba(255, 255, 255, 0.9);
+ z-index: 10;
+
+ span {
+ font-size: 14px;
+ color: #e74c3c;
+ padding: 10px;
+ text-align: center;
+ }
+ }
+}
+
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
diff --git a/apps/react-agent-ui/src/components/ZipModelViewer/index.tsx b/apps/react-agent-ui/src/components/ZipModelViewer/index.tsx
new file mode 100644
index 0000000..b385ba3
--- /dev/null
+++ b/apps/react-agent-ui/src/components/ZipModelViewer/index.tsx
@@ -0,0 +1,340 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { Canvas, useFrame, useThree } from '@react-three/fiber';
+import { OrbitControls } from '@react-three/drei';
+import * as THREE from 'three';
+import JSZip from 'jszip';
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
+import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
+import './index.scss';
+
+interface ZipModelViewerProps {
+ /**
+ * ZIP文件的URL链接
+ */
+ zipUrl: string;
+ /**
+ * ZIP文件中的OBJ文件名（如果与默认名称不同）
+ */
+ objFileName?: string;
+ /**
+ * 组件宽度
+ */
+ width?: string | number;
+ /**
+ * 组件高度
+ */
+ height?: string | number;
+ /**
+ * 是否显示加载状态
+ */
+ showLoading?: boolean;
+ /**
+ * 加载失败时的回调
+ */
+ onError?: (error: Error) => void;
+ /**
+ * 加载进度回调
+ */
+ onProgress?: (progress: number) => void;
+}
+
+/**
+ * ZIP压缩包3D模型查看器组件
+ * 支持下载、解压ZIP文件并加载其中的OBJ模型
+ */
+export const ZipModelViewer: React.FC
+
+
+
+
+ {city} {isDay ? today.daytemp : today.nighttemp}
+ {currentUnit}
+
+
+ 最高:{today.daytemp}° 最低:{today.nighttemp}°
+
+
+ {today.dayweatherIcon && (
+ 
+ )}
+ {isDay ? today.dayweather : today.nightweather}
+
+
+ {forecasts.map((item, index) => (
+
+
+ {item.date}
+
+ ))}
+
+
+ {isDay ? item.dayweather : item.nightweather}
+
+
+ {item.nighttemp}°~{item.daytemp}°
+
+
+ {loading && showLoading && (
+
+
+ );
+};
+
+// 模型组件
+const Model: React.FC<{ model: THREE.Group }> = ({ model }) => {
+ const modelRef = useRef
+
+ 加载中... {Math.round(progress)}%
+
+ )}
+
+ {error && (
+
+ 加载失败: {error.message}
+
+ )}
+
+
+