next.js搭建路由01
This commit is contained in:
@@ -0,0 +1,243 @@
|
||||
import { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: '租户授权 - Crop-X 智慧农业管理系统',
|
||||
description: '租户授权管理页面',
|
||||
}
|
||||
|
||||
export default function TenantAuthorizationPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-6">
|
||||
🔐 租户授权管理
|
||||
</h2>
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center space-x-4">
|
||||
<select className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option>选择租户</option>
|
||||
<option>T001 - 绿色农业合作社</option>
|
||||
<option>T002 - 丰收农场</option>
|
||||
<option>T003 - 智慧农业科技</option>
|
||||
<option>T004 - 现代农业示范园</option>
|
||||
</select>
|
||||
<button className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
|
||||
查询
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2">
|
||||
<div className="bg-green-50 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-green-900 mb-4">
|
||||
📋 功能模块权限
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ module: '智能农机管理', code: 'machinery', enabled: true, features: ['档案管理', '实时监控', '任务调度', '数据分析'] },
|
||||
{ module: '地块信息管理', code: 'land', enabled: true, features: ['地块档案', '地图管理', '空间分析', '环境监测'] },
|
||||
{ module: '农事操作管理', code: 'farming', enabled: true, features: ['农事计划', '任务管理', '操作执行', '知识库'] },
|
||||
{ module: '农业资产管理', code: 'asset', enabled: false, features: ['基础信息', '采购管理', '库存管理', '物资领用'] },
|
||||
{ module: 'AI作物模型', code: 'ai-model', enabled: false, features: ['数据感知', '模型应用', '智能决策', '监控中心'] },
|
||||
{ module: '水肥控制', code: 'irrigation', enabled: true, features: ['水肥机管理', '智能灌溉', '施肥配方', '实时监测'] },
|
||||
{ module: '中心配置', code: 'config', enabled: false, features: ['租户管理', '用户管理', '系统参数', '消息中心'] },
|
||||
].map((item, index) => (
|
||||
<div key={index} className="bg-white rounded-lg p-4">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded mr-3"
|
||||
defaultChecked={item.enabled}
|
||||
/>
|
||||
<h4 className="font-medium text-gray-800">{item.module}</h4>
|
||||
<span className="ml-2 text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
|
||||
{item.code}
|
||||
</span>
|
||||
</div>
|
||||
<button className="text-blue-600 hover:text-blue-800 text-sm">
|
||||
详细设置
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
||||
{item.features.map((feature, featureIndex) => (
|
||||
<label key={featureIndex} className="flex items-center text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-3 w-3 text-green-600 focus:ring-green-500 border-gray-300 rounded mr-2"
|
||||
defaultChecked={item.enabled}
|
||||
/>
|
||||
<span className={item.enabled ? 'text-gray-700' : 'text-gray-400'}>
|
||||
{feature}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="bg-blue-50 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-blue-900 mb-4">
|
||||
🔑 API访问权限
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-700">API访问</span>
|
||||
<span className="text-sm text-green-600">已启用</span>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
API Key
|
||||
</label>
|
||||
<div className="flex space-x-2">
|
||||
<input
|
||||
type="password"
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-md bg-gray-50"
|
||||
value="••••••••••••••••••••••••••••••••"
|
||||
readOnly
|
||||
/>
|
||||
<button className="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
访问频率限制
|
||||
</label>
|
||||
<select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option>1000次/小时</option>
|
||||
<option>5000次/小时</option>
|
||||
<option>10000次/小时</option>
|
||||
<option>无限制</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
IP白名单
|
||||
</label>
|
||||
<textarea
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
rows={3}
|
||||
placeholder="输入允许访问的IP地址，每行一个"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-purple-50 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-purple-900 mb-4">
|
||||
📊 权限统计
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-gray-600">已启用模块</span>
|
||||
<span className="font-semibold text-green-600">4 / 7</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-gray-600">功能权限</span>
|
||||
<span className="font-semibold text-blue-600">18 / 28</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-gray-600">API权限</span>
|
||||
<span className="font-semibold text-purple-600">已授权</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-gray-600">最后更新</span>
|
||||
<span className="text-sm text-gray-500">2024-10-20 15:30</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-orange-50 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-orange-900 mb-4">
|
||||
⚡ 快速操作
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
<button className="w-full px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors">
|
||||
应用默认权限
|
||||
</button>
|
||||
<button className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
|
||||
导出权限配置
|
||||
</button>
|
||||
<button className="w-full px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors">
|
||||
权限变更历史
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 bg-yellow-50 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-yellow-900 mb-4">
|
||||
📋 权限变更记录
|
||||
</h3>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-yellow-100">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
|
||||
时间
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
|
||||
操作类型
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
|
||||
操作内容
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
|
||||
操作人
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{[
|
||||
{ time: '2024-10-20 15:30', type: '模块授权', content: '启用智能农机管理模块', operator: 'admin' },
|
||||
{ time: '2024-10-20 14:15', type: '权限调整', content: '关闭农业资产管理模块', operator: 'admin' },
|
||||
{ time: '2024-10-20 10:45', type: 'API配置', content: '重置API密钥', operator: 'admin' },
|
||||
{ time: '2024-10-19 16:20', type: '权限调整', content: '启用水肥控制模块', operator: 'admin' },
|
||||
].map((record, index) => (
|
||||
<tr key={index}>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{record.time}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||||
record.type === '模块授权' ? 'bg-green-100 text-green-800' :
|
||||
record.type === '权限调整' ? 'bg-blue-100 text-blue-800' :
|
||||
'bg-purple-100 text-purple-800'
|
||||
}`}>
|
||||
{record.type}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{record.content}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{record.operator}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex justify-end space-x-4">
|
||||
<button className="px-6 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
|
||||
取消
|
||||
</button>
|
||||
<button className="px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors">
|
||||
保存权限配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user