461 lines
22 KiB
HTML
461 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>中国烟草AI合同及卷宗审核系统 - 系统配置管理</title>
|
|
<link href="https://unpkg.com/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
|
|
<link href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<!--
|
|
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> -->
|
|
<!-- 引入外部CSS文件 -->
|
|
<link href="main.css" rel="stylesheet">
|
|
<style>
|
|
.status-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.status-active {
|
|
background-color: rgba(0, 177, 106, 0.1);
|
|
color: #00b16a;
|
|
}
|
|
|
|
.status-inactive {
|
|
background-color: rgba(245, 108, 108, 0.1);
|
|
color: #f56c6c;
|
|
}
|
|
|
|
.env-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.env-dev {
|
|
background-color: rgba(64, 158, 255, 0.1);
|
|
color: #409eff;
|
|
}
|
|
|
|
.env-test {
|
|
background-color: rgba(230, 162, 60, 0.1);
|
|
color: #e6a23c;
|
|
}
|
|
|
|
.env-prod {
|
|
background-color: rgba(103, 194, 58, 0.1);
|
|
color: #67c23a;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="layout-container">
|
|
<!-- 侧边栏 -->
|
|
<div class="sidebar">
|
|
<div class="py-6 px-4 border-b border-gray-100">
|
|
<div class="flex items-center">
|
|
<i class="ri-file-search-line text-primary text-xl mr-2"></i>
|
|
<h2 class="text-lg font-medium">AI审核系统</h2>
|
|
</div>
|
|
</div>
|
|
<div class="py-4">
|
|
<div class="sidebar-menu-item">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-dashboard-line mr-3"></i>
|
|
<span>首页</span>
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-menu-item">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-file-upload-line mr-3"></i>
|
|
<span>文件上传</span>
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-menu-item">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-list-check-2 mr-3"></i>
|
|
<span>评查规则库</span>
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-menu-item">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-history-line mr-3"></i>
|
|
<span>审核历史</span>
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-menu-item active">
|
|
<a href="#" class="flex items-center text-sm font-medium">
|
|
<i class="ri-settings-3-line mr-3"></i>
|
|
<span>系统设置</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主内容区 -->
|
|
<div class="main-content">
|
|
<!-- 面包屑导航 -->
|
|
<div class="breadcrumb">
|
|
<span class="breadcrumb-item">首页</span>
|
|
<span class="breadcrumb-item">系统设置</span>
|
|
<span class="breadcrumb-item">系统配置管理</span>
|
|
</div>
|
|
|
|
<!-- 页面头部 -->
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-medium">系统配置管理</h2>
|
|
<button class="ant-btn ant-btn-primary" onclick="window.location.href='配置-新增.html'">
|
|
<i class="ri-add-line"></i> 新增配置
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 搜索过滤区 -->
|
|
<div class="ant-card mb-4">
|
|
<div class="ant-card-body">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div class="form-group">
|
|
<label class="form-label">配置名称</label>
|
|
<input type="text" class="form-input" id="search-name" placeholder="请输入配置名称">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">所属模块</label>
|
|
<select class="form-select" id="search-module">
|
|
<option value="">全部</option>
|
|
<option value="system">系统</option>
|
|
<option value="auth">认证</option>
|
|
<option value="file">文件</option>
|
|
<option value="ai">AI配置</option>
|
|
<option value="notification">通知</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">环境</label>
|
|
<select class="form-select" id="search-environment">
|
|
<option value="">全部</option>
|
|
<option value="dev">开发环境</option>
|
|
<option value="test">测试环境</option>
|
|
<option value="prod">生产环境</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">状态</label>
|
|
<select class="form-select" id="search-status">
|
|
<option value="">全部</option>
|
|
<option value="true">已启用</option>
|
|
<option value="false">已禁用</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end mt-4">
|
|
<button class="ant-btn ant-btn-default mr-2" id="btn-reset">
|
|
<i class="ri-refresh-line"></i> 重置
|
|
</button>
|
|
<button class="ant-btn ant-btn-primary" id="btn-search">
|
|
<i class="ri-search-line"></i> 查询
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 表格区域 -->
|
|
<div class="ant-card">
|
|
<div class="ant-card-body">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full table-auto">
|
|
<thead>
|
|
<tr class="bg-gray-50">
|
|
<th class="py-3 px-4 text-left">配置名称</th>
|
|
<th class="py-3 px-4 text-left">所属模块</th>
|
|
<th class="py-3 px-4 text-left">环境</th>
|
|
<th class="py-3 px-4 text-left">状态</th>
|
|
<th class="py-3 px-4 text-left">最后更新时间</th>
|
|
<th class="py-3 px-4 text-center">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="config-table-body">
|
|
<!-- 配置项列表 -->
|
|
<tr class="border-b">
|
|
<td class="py-3 px-4">database_connection</td>
|
|
<td class="py-3 px-4">system</td>
|
|
<td class="py-3 px-4">
|
|
<span class="env-tag env-prod">生产</span>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<span class="status-tag status-active">已启用</span>
|
|
</td>
|
|
<td class="py-3 px-4">2023-07-15 14:30:26</td>
|
|
<td class="py-3 px-4 text-center">
|
|
<button class="ant-btn-link mr-2" onclick="viewConfig(1)">
|
|
<i class="ri-eye-line text-primary"></i>
|
|
</button>
|
|
<button class="ant-btn-link mr-2" onclick="editConfig(1)">
|
|
<i class="ri-edit-line text-primary"></i>
|
|
</button>
|
|
<button class="ant-btn-link" onclick="toggleStatus(1, true)">
|
|
<i class="ri-stop-circle-line text-warning"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="border-b">
|
|
<td class="py-3 px-4">text_extraction_ai</td>
|
|
<td class="py-3 px-4">ai</td>
|
|
<td class="py-3 px-4">
|
|
<span class="env-tag env-test">测试</span>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<span class="status-tag status-active">已启用</span>
|
|
</td>
|
|
<td class="py-3 px-4">2023-07-14 09:15:33</td>
|
|
<td class="py-3 px-4 text-center">
|
|
<button class="ant-btn-link mr-2" onclick="viewConfig(2)">
|
|
<i class="ri-eye-line text-primary"></i>
|
|
</button>
|
|
<button class="ant-btn-link mr-2" onclick="editConfig(2)">
|
|
<i class="ri-edit-line text-primary"></i>
|
|
</button>
|
|
<button class="ant-btn-link" onclick="toggleStatus(2, true)">
|
|
<i class="ri-stop-circle-line text-warning"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="border-b">
|
|
<td class="py-3 px-4">notification_service</td>
|
|
<td class="py-3 px-4">notification</td>
|
|
<td class="py-3 px-4">
|
|
<span class="env-tag env-dev">开发</span>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<span class="status-tag status-inactive">已禁用</span>
|
|
</td>
|
|
<td class="py-3 px-4">2023-07-10 16:45:19</td>
|
|
<td class="py-3 px-4 text-center">
|
|
<button class="ant-btn-link mr-2" onclick="viewConfig(3)">
|
|
<i class="ri-eye-line text-primary"></i>
|
|
</button>
|
|
<button class="ant-btn-link mr-2" onclick="editConfig(3)">
|
|
<i class="ri-edit-line text-primary"></i>
|
|
</button>
|
|
<button class="ant-btn-link" onclick="toggleStatus(3, false)">
|
|
<i class="ri-play-circle-line text-success"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="border-b">
|
|
<td class="py-3 px-4">file_storage</td>
|
|
<td class="py-3 px-4">file</td>
|
|
<td class="py-3 px-4">
|
|
<span class="env-tag env-prod">生产</span>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<span class="status-tag status-active">已启用</span>
|
|
</td>
|
|
<td class="py-3 px-4">2023-07-08 11:22:07</td>
|
|
<td class="py-3 px-4 text-center">
|
|
<button class="ant-btn-link mr-2" onclick="viewConfig(4)">
|
|
<i class="ri-eye-line text-primary"></i>
|
|
</button>
|
|
<button class="ant-btn-link mr-2" onclick="editConfig(4)">
|
|
<i class="ri-edit-line text-primary"></i>
|
|
</button>
|
|
<button class="ant-btn-link" onclick="toggleStatus(4, true)">
|
|
<i class="ri-stop-circle-line text-warning"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="flex justify-between items-center mt-4">
|
|
<div class="text-sm text-gray-500">
|
|
共 <span id="total-count">4</span> 条数据
|
|
</div>
|
|
<div class="flex items-center">
|
|
<button class="ant-btn ant-btn-default ant-btn-sm mx-1 disabled" disabled>
|
|
<i class="ri-arrow-left-s-line"></i>
|
|
</button>
|
|
<button class="ant-btn ant-btn-primary ant-btn-sm mx-1">1</button>
|
|
<button class="ant-btn ant-btn-default ant-btn-sm mx-1 disabled" disabled>
|
|
<i class="ri-arrow-right-s-line"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 查看配置详情弹窗 -->
|
|
<div id="config-detail-modal" class="modal hidden">
|
|
<div class="modal-mask"></div>
|
|
<div class="modal-container">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">查看配置详情</h3>
|
|
<button class="modal-close" onclick="closeModal('config-detail-modal')">
|
|
<i class="ri-close-line"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-4">
|
|
<div class="text-sm text-gray-500 mb-1">配置名称</div>
|
|
<div id="detail-config-name">-</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<div class="text-sm text-gray-500 mb-1">所属模块</div>
|
|
<div id="detail-module">-</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<div class="text-sm text-gray-500 mb-1">环境</div>
|
|
<div id="detail-environment">-</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<div class="text-sm text-gray-500 mb-1">状态</div>
|
|
<div id="detail-status">-</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<div class="text-sm text-gray-500 mb-1">配置数据</div>
|
|
<pre id="detail-config-data" class="bg-gray-50 p-3 rounded text-sm overflow-x-auto"></pre>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<div class="text-sm text-gray-500 mb-1">创建时间</div>
|
|
<div id="detail-created-at">-</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-sm text-gray-500 mb-1">更新时间</div>
|
|
<div id="detail-updated-at">-</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="ant-btn ant-btn-default" onclick="closeModal('config-detail-modal')">关闭</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 页面加载完成后执行
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 搜索按钮点击事件
|
|
document.getElementById('btn-search').addEventListener('click', function() {
|
|
searchConfigs();
|
|
});
|
|
|
|
// 重置按钮点击事件
|
|
document.getElementById('btn-reset').addEventListener('click', function() {
|
|
document.getElementById('search-name').value = '';
|
|
document.getElementById('search-module').value = '';
|
|
document.getElementById('search-environment').value = '';
|
|
document.getElementById('search-status').value = '';
|
|
});
|
|
});
|
|
|
|
// 搜索配置
|
|
function searchConfigs() {
|
|
const name = document.getElementById('search-name').value;
|
|
const module = document.getElementById('search-module').value;
|
|
const environment = document.getElementById('search-environment').value;
|
|
const status = document.getElementById('search-status').value;
|
|
|
|
console.log('搜索参数:', { name, module, environment, status });
|
|
// 实际应用中应通过AJAX请求获取数据并更新表格
|
|
alert('执行搜索...');
|
|
}
|
|
|
|
// 查看配置详情
|
|
function viewConfig(id) {
|
|
// 实际应用中应通过AJAX请求获取数据
|
|
console.log('查看配置:', id);
|
|
|
|
// 模拟数据
|
|
let configData = {
|
|
id: id,
|
|
config_name: 'database_connection',
|
|
module: 'system',
|
|
environment: 'prod',
|
|
is_active: true,
|
|
config_data: {
|
|
database: {
|
|
host: "db.cluster.com",
|
|
port: 5432,
|
|
pool_size: 20,
|
|
ssl: true
|
|
},
|
|
cache: {
|
|
ttl: 3600,
|
|
max_entries: 1000
|
|
},
|
|
feature_flags: ["new_ui", "analytics_v2"]
|
|
},
|
|
created_at: '2023-07-10 10:15:23',
|
|
updated_at: '2023-07-15 14:30:26'
|
|
};
|
|
|
|
if (id === 2) {
|
|
configData.config_name = 'text_extraction_ai';
|
|
configData.module = 'ai';
|
|
configData.environment = 'test';
|
|
} else if (id === 3) {
|
|
configData.config_name = 'notification_service';
|
|
configData.module = 'notification';
|
|
configData.environment = 'dev';
|
|
configData.is_active = false;
|
|
} else if (id === 4) {
|
|
configData.config_name = 'file_storage';
|
|
configData.module = 'file';
|
|
}
|
|
|
|
// 填充弹窗内容
|
|
document.getElementById('detail-config-name').textContent = configData.config_name;
|
|
document.getElementById('detail-module').textContent = configData.module;
|
|
|
|
let envText = '';
|
|
if (configData.environment === 'dev') envText = '开发环境';
|
|
else if (configData.environment === 'test') envText = '测试环境';
|
|
else if (configData.environment === 'prod') envText = '生产环境';
|
|
document.getElementById('detail-environment').textContent = envText;
|
|
|
|
document.getElementById('detail-status').textContent = configData.is_active ? '已启用' : '已禁用';
|
|
document.getElementById('detail-config-data').textContent = JSON.stringify(configData.config_data, null, 2);
|
|
document.getElementById('detail-created-at').textContent = configData.created_at;
|
|
document.getElementById('detail-updated-at').textContent = configData.updated_at;
|
|
|
|
// 显示弹窗
|
|
document.getElementById('config-detail-modal').classList.remove('hidden');
|
|
}
|
|
|
|
// 编辑配置
|
|
function editConfig(id) {
|
|
console.log('编辑配置:', id);
|
|
window.location.href = `配置-新增.html?id=${id}`;
|
|
}
|
|
|
|
// 切换配置状态
|
|
function toggleStatus(id, currentStatus) {
|
|
const newStatus = !currentStatus;
|
|
const statusText = newStatus ? '启用' : '禁用';
|
|
|
|
if (confirm(`确定要${statusText}该配置吗？`)) {
|
|
console.log('切换配置状态:', id, '新状态:', newStatus);
|
|
// 实际应用中应通过AJAX请求更新状态
|
|
alert('状态已更新');
|
|
// 刷新页面或更新UI
|
|
location.reload();
|
|
}
|
|
}
|
|
|
|
// 关闭弹窗
|
|
function closeModal(modalId) {
|
|
document.getElementById(modalId).classList.add('hidden');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |