587 lines
24 KiB
HTML
587 lines
24 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://cdnjs.cloudflare.com/ajax/libs/remixicon/2.5.0/remixicon.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/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"> -->
|
|
<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> |