重新构建路由和配置样式文件
This commit is contained in:
@@ -0,0 +1,585 @@
|
||||
<!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://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">
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #00684a;
|
||||
--primary-hover: #005a40;
|
||||
--primary-light: rgba(0, 104, 74, 0.1);
|
||||
--success-color: #52c41a;
|
||||
--warning-color: #faad14;
|
||||
--error-color: #ff4d4f;
|
||||
--text-color: rgba(0, 0, 0, 0.85);
|
||||
--text-secondary: rgba(0, 0, 0, 0.45);
|
||||
--border-color: #f0f0f0;
|
||||
--bg-gray: #f5f5f5;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
line-height: 1.5;
|
||||
color: var(--text-color);
|
||||
background-color: var(--bg-gray);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.layout-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 280px;
|
||||
padding: 24px;
|
||||
width: calc(100% - 280px);
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.breadcrumb-item:last-child {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.breadcrumb-item:not(:last-child)::after {
|
||||
content: '/';
|
||||
margin: 0 8px;
|
||||
color: #d9d9d9;
|
||||
}
|
||||
|
||||
.text-primary { color: var(--primary-color); }
|
||||
.text-success { color: var(--success-color); }
|
||||
.text-warning { color: var(--warning-color); }
|
||||
.text-error { color: var(--error-color); }
|
||||
.text-secondary { color: var(--text-secondary); }
|
||||
|
||||
.bg-primary { background-color: var(--primary-color); }
|
||||
.bg-primary-light { background-color: var(--primary-light); }
|
||||
.hover\:underline:hover { text-decoration: underline; }
|
||||
|
||||
.ant-card {
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.ant-card-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.ant-btn i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
border: 1px solid var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ant-btn-primary:hover {
|
||||
background-color: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.ant-btn-default {
|
||||
background-color: white;
|
||||
border: 1px solid #d9d9d9;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.ant-btn-default:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.ant-btn-text {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 4px 8px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.ant-btn-text:hover {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.ant-btn-sm {
|
||||
padding: 4px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.form-input, .form-select, .form-textarea {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.form-input:focus, .form-select:focus, .form-textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px rgba(0, 104, 74, 0.2);
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.ant-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.ant-table th {
|
||||
background-color: #fafafa;
|
||||
padding: 12px 16px;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.ant-table td {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.ant-table tr:hover td {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.ant-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ant-pagination-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.ant-pagination-item-active {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ant-pagination-item:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.ant-pagination-item:disabled {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
border-color: #d9d9d9;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.type-extraction {
|
||||
background-color: rgba(82, 196, 26, 0.1);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.type-evaluation {
|
||||
background-color: rgba(250, 173, 20, 0.1);
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.type-summary {
|
||||
background-color: rgba(24, 144, 255, 0.1);
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status-active {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.status-inactive {
|
||||
background-color: #fff1f0;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.status-system {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout-container">
|
||||
<!-- 引入导航侧边栏 -->
|
||||
<div id="nav-container"></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>
|
||||
<div>
|
||||
<button class="ant-btn ant-btn-primary" onclick="window.location.href='提示词-新增修改.html'">
|
||||
<i class="ri-add-line"></i> 新增提示词模板
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<div class="ant-card mb-4">
|
||||
<div class="ant-card-body">
|
||||
<div class="flex flex-wrap items-end gap-4">
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label class="form-label">模板名称</label>
|
||||
<input type="text" class="form-input" placeholder="请输入模板名称" id="search-name">
|
||||
</div>
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label class="form-label">模板类型</label>
|
||||
<select class="form-select" id="search-type">
|
||||
<option value="">全部</option>
|
||||
<option value="Extraction">抽取(Extraction)</option>
|
||||
<option value="Evaluation">评估(Evaluation)</option>
|
||||
<option value="Summary">摘要(Summary)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label class="form-label">状态</label>
|
||||
<select class="form-select" id="search-status">
|
||||
<option value="">全部</option>
|
||||
<option value="1">启用</option>
|
||||
<option value="0">停用</option>
|
||||
<option value="system">系统预设</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<button class="ant-btn ant-btn-default mr-2" id="reset-btn">
|
||||
<i class="ri-refresh-line"></i> 重置
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-primary" id="search-btn">
|
||||
<i class="ri-search-line"></i> 搜索
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="ant-card">
|
||||
<div class="ant-card-body">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="ant-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 300px;">模板名称</th>
|
||||
<th style="width: 100px;">类型</th>
|
||||
<th>描述</th>
|
||||
<th style="width: 80px;">版本</th>
|
||||
<th style="width: 80px;">状态</th>
|
||||
<th style="width: 100px;">创建者</th>
|
||||
<th style="width: 150px;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- 系统预设模板 -->
|
||||
<tr>
|
||||
<td>
|
||||
<div class="flex items-center">
|
||||
<i class="ri-file-list-line text-primary mr-2"></i>
|
||||
<span>行政处罚-抽取通用模板</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="type-badge type-extraction">抽取</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-secondary text-sm truncate max-w-xs" title="本模板用于抽取行政处罚决定书编号等信息">
|
||||
本模板用于抽取行政处罚决定书编号等信息
|
||||
</div>
|
||||
</td>
|
||||
<td>v1.0</td>
|
||||
<td><span class="status-badge status-system">系统预设</span></td>
|
||||
<td>system</td>
|
||||
<td>
|
||||
<button class="ant-btn ant-btn-text ant-btn-sm text-primary" onclick="viewTemplate(1)">
|
||||
<i class="ri-eye-line"></i> 查看
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-text ant-btn-sm text-primary" onclick="cloneTemplate(1)">
|
||||
<i class="ri-file-copy-line"></i> 复制
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- 用户自定义模板 -->
|
||||
<tr>
|
||||
<td>
|
||||
<div class="flex items-center">
|
||||
<i class="ri-file-list-line text-primary mr-2"></i>
|
||||
<span>销售合同-甲方信息评估</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="type-badge type-evaluation">评估</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-secondary text-sm truncate max-w-xs" title="评估销售合同中甲方信息是否完整">
|
||||
评估销售合同中甲方信息是否完整
|
||||
</div>
|
||||
</td>
|
||||
<td>v1.2</td>
|
||||
<td><span class="status-badge status-active">启用</span></td>
|
||||
<td>admin</td>
|
||||
<td>
|
||||
<button class="ant-btn ant-btn-text ant-btn-sm text-primary" onclick="editTemplate(2)">
|
||||
<i class="ri-edit-line"></i> 编辑
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-text ant-btn-sm text-error" onclick="deleteTemplate(2)">
|
||||
<i class="ri-delete-bin-line"></i> 删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="flex items-center">
|
||||
<i class="ri-file-list-line text-primary mr-2"></i>
|
||||
<span>专卖许可证-摘要模板</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="type-badge type-summary">摘要</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-secondary text-sm truncate max-w-xs" title="生成专卖许可证申请文件的内容摘要">
|
||||
生成专卖许可证申请文件的内容摘要
|
||||
</div>
|
||||
</td>
|
||||
<td>v1.0</td>
|
||||
<td><span class="status-badge status-active">启用</span></td>
|
||||
<td>admin</td>
|
||||
<td>
|
||||
<button class="ant-btn ant-btn-text ant-btn-sm text-primary" onclick="editTemplate(3)">
|
||||
<i class="ri-edit-line"></i> 编辑
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-text ant-btn-sm text-error" onclick="deleteTemplate(3)">
|
||||
<i class="ri-delete-bin-line"></i> 删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="flex items-center">
|
||||
<i class="ri-file-list-line text-primary mr-2"></i>
|
||||
<span>采购合同-乙方资质抽取</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="type-badge type-extraction">抽取</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-secondary text-sm truncate max-w-xs" title="抽取采购合同中乙方的资质信息">
|
||||
抽取采购合同中乙方的资质信息
|
||||
</div>
|
||||
</td>
|
||||
<td>v1.1</td>
|
||||
<td><span class="status-badge status-inactive">停用</span></td>
|
||||
<td>zhangsan</td>
|
||||
<td>
|
||||
<button class="ant-btn ant-btn-text ant-btn-sm text-primary" onclick="editTemplate(4)">
|
||||
<i class="ri-edit-line"></i> 编辑
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-text ant-btn-sm text-error" onclick="deleteTemplate(4)">
|
||||
<i class="ri-delete-bin-line"></i> 删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="flex items-center">
|
||||
<i class="ri-file-list-line text-primary mr-2"></i>
|
||||
<span>合同通用-关键条款评估</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="type-badge type-evaluation">评估</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-secondary text-sm truncate max-w-xs" title="评估合同中关键条款是否明确、合规">
|
||||
评估合同中关键条款是否明确、合规
|
||||
</div>
|
||||
</td>
|
||||
<td>v2.0</td>
|
||||
<td><span class="status-badge status-active">启用</span></td>
|
||||
<td>lisi</td>
|
||||
<td>
|
||||
<button class="ant-btn ant-btn-text ant-btn-sm text-primary" onclick="editTemplate(5)">
|
||||
<i class="ri-edit-line"></i> 编辑
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-text ant-btn-sm text-error" onclick="deleteTemplate(5)">
|
||||
<i class="ri-delete-bin-line"></i> 删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
<div class="text-sm text-secondary">
|
||||
共 5 条记录，每页显示 10 条
|
||||
</div>
|
||||
<div class="ant-pagination">
|
||||
<button class="ant-pagination-item ant-pagination-prev" disabled>
|
||||
<i class="ri-arrow-left-s-line"></i>
|
||||
</button>
|
||||
<button class="ant-pagination-item ant-pagination-item-active">1</button>
|
||||
<button class="ant-pagination-item ant-pagination-next" disabled>
|
||||
<i class="ri-arrow-right-s-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 加载导航栏
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 加载导航栏
|
||||
fetch('nav.html')
|
||||
.then(response => response.text())
|
||||
.then(html => {
|
||||
document.getElementById('nav-container').innerHTML = html;
|
||||
})
|
||||
.catch(error => console.error('加载导航栏失败:', error));
|
||||
|
||||
// 搜索功能
|
||||
document.getElementById('search-btn').addEventListener('click', function() {
|
||||
const name = document.getElementById('search-name').value;
|
||||
const type = document.getElementById('search-type').value;
|
||||
const status = document.getElementById('search-status').value;
|
||||
|
||||
console.log('搜索条件：', {
|
||||
name: name,
|
||||
type: type,
|
||||
status: status
|
||||
});
|
||||
|
||||
// 实际应用中应该通过AJAX请求获取过滤后的数据
|
||||
alert('执行搜索操作');
|
||||
});
|
||||
|
||||
// 重置按钮
|
||||
document.getElementById('reset-btn').addEventListener('click', function() {
|
||||
document.getElementById('search-name').value = '';
|
||||
document.getElementById('search-type').value = '';
|
||||
document.getElementById('search-status').value = '';
|
||||
});
|
||||
});
|
||||
|
||||
// 查看模板详情
|
||||
function viewTemplate(id) {
|
||||
window.location.href = `提示词-新增修改.html?id=${id}&mode=view`;
|
||||
}
|
||||
|
||||
// 复制模板
|
||||
function cloneTemplate(id) {
|
||||
if (confirm('确定要复制该模板创建新模板吗？')) {
|
||||
window.location.href = `提示词-新增修改.html?id=${id}&mode=clone`;
|
||||
}
|
||||
}
|
||||
|
||||
// 编辑模板
|
||||
function editTemplate(id) {
|
||||
window.location.href = `提示词-新增修改.html?id=${id}&mode=edit`;
|
||||
}
|
||||
|
||||
// 删除模板
|
||||
function deleteTemplate(id) {
|
||||
if (confirm('确定要删除该模板吗？删除后无法恢复。')) {
|
||||
// 实际应该调用API删除数据
|
||||
console.log('删除模板ID:', id);
|
||||
alert('删除成功！');
|
||||
// 刷新页面
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user