239 lines
11 KiB
HTML
239 lines
11 KiB
HTML
<!-- templates/dashboard.html -->
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>中文文本分类系统</title>
|
||
<!-- Bootstrap 5 CSS -->
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<!-- Font Awesome 图标 -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||
<!-- 自定义CSS -->
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
|
||
</head>
|
||
<body>
|
||
<!-- 顶部导航栏 -->
|
||
<nav class="navbar navbar-expand-lg fixed-top top-navbar">
|
||
<div class="container-fluid">
|
||
<!-- 侧边栏切换按钮 -->
|
||
<button class="btn btn-link text-white me-3 d-lg-none" id="sidebar-toggle">
|
||
<i class="fas fa-bars"></i>
|
||
</button>
|
||
|
||
<!-- 网站标题 -->
|
||
<a class="navbar-brand text-white" href="#">
|
||
<i class="fas fa-file-alt me-2"></i>
|
||
中文文本分类系统
|
||
</a>
|
||
|
||
<!-- 右侧用户信息 -->
|
||
<div class="ms-auto d-flex align-items-center user-dropdown">
|
||
<div class="dropdown">
|
||
<a class="nav-link dropdown-toggle text-white" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||
<i class="fas fa-user-circle me-1"></i>
|
||
<span>{{ session.user_name if session.user_name else session.user_email }}</span>
|
||
</a>
|
||
<ul class="dropdown-menu" aria-labelledby="userDropdown">
|
||
<li><a class="dropdown-item" href="#"><i class="fas fa-user me-2"></i>个人资料</a></li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li><a class="dropdown-item" href="{{ url_for('auth.logout') }}"><i class="fas fa-sign-out-alt me-2"></i>退出登录</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 侧边栏 -->
|
||
<div class="sidebar">
|
||
<div class="px-3 mb-3">
|
||
<div class="text-muted small">导航菜单</div>
|
||
</div>
|
||
|
||
<ul class="nav flex-column mb-auto">
|
||
<li class="nav-item">
|
||
<a href="#" class="sidebar-link active" data-page="classify">
|
||
<i class="fas fa-file-alt"></i>
|
||
<span>文本分类</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#" class="sidebar-link" data-page="documents">
|
||
<i class="fas fa-list-alt"></i>
|
||
<span>已处理文本</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#" class="sidebar-link" data-page="batch">
|
||
<i class="fas fa-layer-group"></i>
|
||
<span>批量文本分类</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 主内容区 -->
|
||
<div class="main-content">
|
||
<!-- 内容区域 - 根据选择的页面显示不同内容 -->
|
||
<div id="page-content">
|
||
<!-- 文本分类页面 (默认显示) -->
|
||
<div class="page-section" id="classify-section">
|
||
<h2 class="mb-4">文本分类</h2>
|
||
|
||
<div class="content-card">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="form-group mb-3">
|
||
<label for="text-input" class="form-label">输入文本内容</label>
|
||
<textarea class="form-control" id="text-input" rows="10" placeholder="请输入或粘贴需要分类的中文文本..."></textarea>
|
||
</div>
|
||
<div class="mb-3">
|
||
<button id="classify-text-btn" class="btn btn-primary me-2">
|
||
<i class="fas fa-search me-1"></i> 分类文本
|
||
</button>
|
||
<button id="clear-text-btn" class="btn btn-outline-secondary">
|
||
<i class="fas fa-eraser me-1"></i> 清空
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="border rounded p-3 h-100" id="classification-result">
|
||
<h5 class="text-center text-muted">
|
||
<i class="fas fa-info-circle me-2"></i>
|
||
分类结果将在这里显示
|
||
</h5>
|
||
<div class="text-center mt-4">
|
||
<i class="fas fa-arrow-left text-muted me-2"></i>
|
||
请在左侧输入文本或上传文件
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-card mt-4">
|
||
<h4 class="mb-3">上传文本文件</h4>
|
||
<div class="mb-3">
|
||
<div class="input-group">
|
||
<input type="file" class="form-control" id="file-upload" accept=".txt">
|
||
<button class="btn btn-primary" id="upload-file-btn">
|
||
<i class="fas fa-upload me-1"></i> 上传并分类
|
||
</button>
|
||
</div>
|
||
<div class="form-text">支持上传 .txt 格式的文本文件</div>
|
||
</div>
|
||
<div id="file-result" class="mt-3" style="display: none;">
|
||
<!-- 文件分类结果将在这里显示 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 已处理文本页面 (默认隐藏) -->
|
||
<div class="page-section d-none" id="documents-section">
|
||
<h2 class="mb-4">已处理文本</h2>
|
||
|
||
<div class="content-card">
|
||
<div class="row mb-3">
|
||
<div class="col-md-6">
|
||
<div class="input-group">
|
||
<label class="input-group-text" for="category-filter">分类筛选</label>
|
||
<select class="form-select" id="category-filter">
|
||
<option value="all" selected>全部</option>
|
||
<!-- 分类选项将通过JavaScript动态添加 -->
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 text-md-end">
|
||
<div class="input-group justify-content-md-end">
|
||
<label class="input-group-text" for="per-page-select">每页显示</label>
|
||
<select class="form-select" style="max-width: 80px;" id="per-page-select">
|
||
<option value="10">10</option>
|
||
<option value="25">25</option>
|
||
<option value="50">50</option>
|
||
<option value="100">100</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<button id="download-selected-btn" class="btn btn-success disabled">
|
||
<i class="fas fa-download me-1"></i> 下载选中文件
|
||
</button>
|
||
</div>
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-hover" id="documents-table">
|
||
<thead>
|
||
<tr>
|
||
<th width="40">
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" id="select-all-docs">
|
||
</div>
|
||
</th>
|
||
<th>文件名</th>
|
||
<th>分类</th>
|
||
<th>大小</th>
|
||
<th>分类时间</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- 文档列表将通过JavaScript动态添加 -->
|
||
<tr>
|
||
<td colspan="6" class="text-center py-4">
|
||
正在加载文档...
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="d-flex justify-content-between align-items-center mt-3" id="pagination-container">
|
||
<!-- 分页控件将通过JavaScript动态添加 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 批量文本分类页面 (默认隐藏) -->
|
||
<div class="page-section d-none" id="batch-section">
|
||
<h2 class="mb-4">批量文本分类</h2>
|
||
|
||
<div class="content-card">
|
||
<div class="text-center py-4 mb-4 border rounded">
|
||
<i class="fas fa-upload fa-3x mb-3 text-primary"></i>
|
||
<h4>上传压缩文件</h4>
|
||
<p class="text-muted">支持ZIP/RAR格式，最大10MB，包含多个TXT文件</p>
|
||
<div class="mb-3 mx-auto" style="max-width: 400px;">
|
||
<input type="file" class="form-control" id="batch-file-upload" accept=".zip,.rar">
|
||
</div>
|
||
<button class="btn btn-primary" id="upload-batch-btn">
|
||
<i class="fas fa-cogs me-1"></i> 上传并批量分类
|
||
</button>
|
||
</div>
|
||
|
||
<div id="batch-result" style="display: none;">
|
||
<!-- 批量处理结果将在这里显示 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 加载指示器 -->
|
||
<div class="spinner-overlay" id="loading-overlay">
|
||
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
|
||
<span class="visually-hidden">加载中...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bootstrap 5 JS with Popper -->
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<!-- 自定义JavaScript -->
|
||
<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
|
||
</body>
|
||
</html>
|
||
|