cavin/smart-crop-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

生产管理系统前端 - openapi - fetch生成器开发

Browse Source
This commit is contained in:
peng
2025-10-27 21:53:18 +08:00
parent 5055e40de6
commit 42a4a9f566
29 changed files with 4264 additions and 1463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
crop-x/src/components/examples/ApiExample.tsx
View File

@@ -1,231 +0,0 @@
'use client';
import React, { useState, useEffect } from 'react';
import { api, testConnection, type User, type Machinery } from '@/lib/api/client';
export default function ApiExample() {
const [users, setUsers] = useState<User[]>([]);
const [machinery, setMachinery] = useState<Machinery[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [connectionStatus, setConnectionStatus] = useState<'testing' | 'connected' | 'disconnected'>('testing');
// 获取用户列表
const fetchUsers = async () => {
setLoading(true);
setError(null);
try {
const result = await api.users.getList({ page: 1, limit: 10 });
if (result?.data?.users) {
setUsers(result.data.users);
}
} catch (err) {
setError(err instanceof Error ? err.message : '获取用户失败');
} finally {
setLoading(false);
}
};
// 获取农机列表
const fetchMachinery = async () => {
setLoading(true);
setError(null);
try {
const result = await api.machinery.getList({ page: 1, limit: 10 });
if (result?.data?.machinery) {
setMachinery(result.data.machinery);
}
} catch (err) {
setError(err instanceof Error ? err.message : '获取农机失败');
} finally {
setLoading(false);
}
};
// 创建新农机
const createMachinery = async () => {
try {
const newMachinery = await api.machinery.create({
name: '新拖拉机',
type: 'tractor',
model: 'John Deere 6M',
serial_number: 'JD6M123456',
purchase_date: new Date().toISOString().split('T')[0],
});
console.log('创建成功:', newMachinery);
// 刷新列表
fetchMachinery();
} catch (err) {
setError(err instanceof Error ? err.message : '创建农机失败');
}
};
// 测试 API 连接
const testApiConnection = async () => {
setConnectionStatus('testing');
const result = await testConnection();
if (result.success) {
setConnectionStatus('connected');
// 连接成功后获取数据
fetchUsers();
fetchMachinery();
} else {
setConnectionStatus('disconnected');
setError(`API 连接失败: ${result.error}`);
}
};
useEffect(() => {
testApiConnection();
}, []);
if (loading) {
return <div className="p-4">加载中...</div>;
}
if (error) {
return (
<div className="p-4">
<div className="text-red-600">错误: {error}</div>
<button
onClick={() => {
setError(null);
fetchUsers();
fetchMachinery();
}}
className="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
>
重试
</button>
</div>
);
}
// 连接状态显示
const renderConnectionStatus = () => {
switch (connectionStatus) {
case 'testing':
return (
<div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
<div className="flex items-center">
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600 mr-2"></div>
<span className="text-blue-800">正在测试 API 连接...</span>
</div>
</div>
);
case 'connected':
return (
<div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg">
<div className="flex items-center justify-between">
<div className="flex items-center">
<div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
<span className="text-green-800">API 连接成功</span>
</div>
<button
onClick={testApiConnection}
className="px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700"
>
重新测试
</button>
</div>
</div>
);
case 'disconnected':
return (
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
<div className="flex items-center justify-between">
<div>
<div className="flex items-center">
<div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
<span className="text-red-800">API 连接失败</span>
</div>
<div className="text-sm text-red-600 mt-1">{error}</div>
</div>
<button
onClick={testApiConnection}
className="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700"
>
重试连接
</button>
</div>
</div>
);
}
};
return (
<div className="p-6">
<h1 className="text-2xl font-bold mb-6">API 调用示例</h1>
{/* 连接状态 */}
{renderConnectionStatus()}
{/* 服务器信息 */}
<div className="mb-6 p-4 bg-muted rounded-lg">
<h3 className="font-semibold mb-2">服务器配置</h3>
<div className="text-sm text-muted-foreground space-y-1">
<div><strong>Base URL:</strong> https://gitea-admin-test-app-app.dev.maimaiag.com/api/v1</div>
<div><strong>开发/测试/生产:</strong> 统一使用此地址</div>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* 用户列表 */}
<div className="bg-card border rounded-lg p-4">
<h2 className="text-xl font-semibold mb-4">用户列表</h2>
<div className="space-y-2">
{users.map((user) => (
<div key={user.id} className="p-3 bg-muted rounded">
<div className="font-medium">{user.full_name || user.username}</div>
<div className="text-sm text-muted-foreground">
{user.email} • {user.role} • {user.status}
</div>
</div>
))}
</div>
</div>
{/* 农机列表 */}
<div className="bg-card border rounded-lg p-4">
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-semibold">农机列表</h2>
<button
onClick={createMachinery}
className="px-3 py-1 bg-primary text-primary-foreground rounded hover:bg-primary/90"
>
添加农机
</button>
</div>
<div className="space-y-2">
{machinery.map((machine) => (
<div key={machine.id} className="p-3 bg-muted rounded">
<div className="font-medium">{machine.name}</div>
<div className="text-sm text-muted-foreground">
{machine.type} • {machine.model} • {machine.status}
</div>
{machine.operator && (
<div className="text-xs text-muted-foreground mt-1">
操作员: {machine.operator.full_name || machine.operator.username}
</div>
)}
</div>
))}
</div>
</div>
</div>
{/* 类型安全示例 */}
<div className="mt-8 p-4 bg-muted rounded-lg">
<h3 className="text-lg font-semibold mb-2">类型安全优势</h3>
<ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground">
<li>✅ API 调用参数有完整的类型检查</li>
<li>✅ 响应数据有自动的类型推断</li>
<li>✅ 编译时就能发现类型错误</li>
<li>✅ IDE 支持自动补全和提示</li>
</ul>
</div>
</div>
);
}