Skip to content

Commit 03bc7cb

Browse files
DataEraserCDataEraserC
committed
refactor(ui): 将HTML内容拆分为独立的部分文件
- 将页面内容拆分为多个独立的HTML部分文件 - 创建loader.js动态加载各部分页面内容 - 添加占位符元素用于动态插入各部分内容 - 延迟初始化tab功能确保页面加载完成 - 添加类型检查避免函数调用错误 - 更新index.html引入新的loader.js文件 - 移除原有内联HTML内容和相关JavaScript代码
1 parent e35cb4f commit 03bc7cb

12 files changed

Lines changed: 388 additions & 317 deletions

File tree

‎file_classification_webapi/static/index.html‎

Lines changed: 10 additions & 299 deletions
Large diffs are not rendered by default.

‎file_classification_webapi/static/js/loader.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
// 动态加载HTML内容的工具函数
2+
document.addEventListener('DOMContentLoaded', function() {
3+
// 加载所有部分页面内容
4+
loadPartials();
5+
});
6+
7+
function loadPartials() {
8+
// 定义需要加载的部分页面
9+
const partials = [
10+
{ id: 'header-placeholder', file: 'partials/header.html' },
11+
{ id: 'sidebar-placeholder', file: 'partials/sidebar.html' },
12+
{ id: 'files-placeholder', file: 'partials/files.html' },
13+
{ id: 'groups-placeholder', file: 'partials/groups.html' },
14+
{ id: 'tags-placeholder', file: 'partials/tags.html' },
15+
{ id: 'file-groups-placeholder', file: 'partials/file-groups.html' },
16+
{ id: 'group-tags-placeholder', file: 'partials/group-tags.html' },
17+
{ id: 'group-relations-placeholder', file: 'partials/group-relations.html' },
18+
{ id: 'modal-placeholder', file: 'partials/modal.html' }
19+
];
20+
21+
// 加载每个部分页面
22+
partials.forEach(partial => {
23+
fetch(partial.file)
24+
.then(response => response.text())
25+
.then(html => {
26+
const placeholder = document.getElementById(partial.id);
27+
if (placeholder) {
28+
placeholder.innerHTML = html;
29+
}
30+
31+
// 当所有内容加载完成后，初始化应用
32+
if (partial.id === 'modal-placeholder') {
33+
initializeApp();
34+
}
35+
})
36+
.catch(error => {
37+
console.error(`加载 ${partial.file} 失败:`, error);
38+
});
39+
});
40+
}
41+
42+
function initializeApp() {
43+
// 初始化应用功能
44+
// 这里可以添加一些初始化逻辑
45+
46+
// 默认显示第一个tab并自动搜索
47+
const firstTab = document.querySelector('.tab-content');
48+
if (firstTab) {
49+
firstTab.style.display = 'block';
50+
const firstNavLink = document.querySelector('.nav-link');
51+
if (firstNavLink) {
52+
firstNavLink.classList.add('active');
53+
autoSearch(firstNavLink.getAttribute('data-target'));
54+
}
55+
}
56+
}

‎file_classification_webapi/static/js/main.js‎

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22

33
// Tab切换功能
44
document.addEventListener('DOMContentLoaded', function() {
5+
// 延迟初始化，确保部分页面已加载完成
6+
setTimeout(initTabs, 100);
7+
});
8+
9+
function initTabs() {
510
const navLinks = document.querySelectorAll('.nav-link');
611
const tabContents = document.querySelectorAll('.tab-content');
712

@@ -28,7 +33,10 @@ document.addEventListener('DOMContentLoaded', function() {
2833
});
2934

3035
// 显示当前tab内容
31-
document.getElementById(target).style.display = 'block';
36+
const targetElement = document.getElementById(target);
37+
if (targetElement) {
38+
targetElement.style.display = 'block';
39+
}
3240

3341
// 设置当前链接为活动状态
3442
this.classList.add('active');
@@ -37,38 +45,40 @@ document.addEventListener('DOMContentLoaded', function() {
3745
autoSearch(target);
3846
});
3947
});
40-
41-
// 默认显示第一个tab并自动搜索
42-
if (tabContents.length > 0) {
43-
tabContents[0].style.display = 'block';
44-
navLinks[0].classList.add('active');
45-
openedTabs.add(navLinks[0].getAttribute('data-target'));
46-
47-
// 自动执行首次搜索
48-
autoSearch(navLinks[0].getAttribute('data-target'));
49-
}
50-
});
48+
}
5149

5250
// 根据当前tab自动执行搜索
5351
function autoSearch(tabName) {
5452
switch(tabName) {
5553
case 'files':
56-
listFilesByFilter();
54+
if (typeof listFilesByFilter === 'function') {
55+
listFilesByFilter();
56+
}
5757
break;
5858
case 'groups':
59-
listGroupsByFilter();
59+
if (typeof listGroupsByFilter === 'function') {
60+
listGroupsByFilter();
61+
}
6062
break;
6163
case 'tags':
62-
listTagsByFilter();
64+
if (typeof listTagsByFilter === 'function') {
65+
listTagsByFilter();
66+
}
6367
break;
6468
case 'file-groups':
65-
listFileGroupsByFilter();
69+
if (typeof listFileGroupsByFilter === 'function') {
70+
listFileGroupsByFilter();
71+
}
6672
break;
6773
case 'group-tags':
68-
listGroupTagsByFilter();
74+
if (typeof listGroupTagsByFilter === 'function') {
75+
listGroupTagsByFilter();
76+
}
6977
break;
7078
case 'group-relations':
71-
listGroupRelationsByFilter();
79+
if (typeof listGroupRelationsByFilter === 'function') {
80+
listGroupRelationsByFilter();
81+
}
7282
break;
7383
}
7484
}

‎file_classification_webapi/static/partials/file-groups.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!-- 文件组关联 -->
2+
<section id="file-groups" class="tab-content">
3+
<h2>文件组关联</h2>
4+
<!-- 简单搜索表单 -->
5+
<div class="search-form">
6+
<div class="form-row">
7+
<div class="form-group">
8+
<label for="file-group-file-id">文件ID:</label>
9+
<input type="number" id="file-group-file-id" placeholder="请输入文件ID">
10+
</div>
11+
<div class="form-group">
12+
<label for="file-group-group-id">组ID:</label>
13+
<input type="number" id="file-group-group-id" placeholder="请输入组ID">
14+
</div>
15+
<div class="form-group">
16+
<button onclick="listFileGroupsByFilter()">搜索</button>
17+
<button onclick="resetFileGroupFilter()">重置</button>
18+
</div>
19+
</div>
20+
</div>
21+
22+
<div class="toolbar">
23+
<button onclick="openCreateFileGroupDialog()">新增关联</button>
24+
<button onclick="deleteSelectedFileGroups()">批量删除</button>
25+
<button onclick="openComplexSearchFileGroupDialog()">复杂查询</button>
26+
</div>
27+
<div class="table-container">
28+
<table id="file-groups-table">
29+
<thead>
30+
<tr>
31+
<th><input type="checkbox" id="file-groups-select-all" onclick="toggleAllFileGroups(this)"></th>
32+
<th>文件ID</th>
33+
<th>组ID</th>
34+
<th>操作</th>
35+
</tr>
36+
</thead>
37+
<tbody>
38+
<!-- 数据将通过JavaScript动态填充 -->
39+
</tbody>
40+
</table>
41+
</div>
42+
</section>

‎file_classification_webapi/static/partials/files.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!-- 文件管理 -->
2+
<section id="files" class="tab-content">
3+
<h2>文件管理</h2>
4+
<!-- 简单搜索表单 -->
5+
<div class="search-form">
6+
<div class="form-row">
7+
<div class="form-group">
8+
<label for="file-id">文件ID:</label>
9+
<input type="number" id="file-id" placeholder="请输入文件ID">
10+
</div>
11+
<div class="form-group">
12+
<label for="file-type">文件类型:</label>
13+
<input type="text" id="file-type" placeholder="请输入文件类型">
14+
</div>
15+
<div class="form-group">
16+
<label for="file-path">文件路径:</label>
17+
<input type="text" id="file-path" placeholder="请输入文件路径">
18+
</div>
19+
<div class="form-group">
20+
<button onclick="listFilesByFilter()">搜索</button>
21+
<button onclick="resetFileFilter()">重置</button>
22+
</div>
23+
</div>
24+
</div>
25+
26+
<div class="toolbar">
27+
<button onclick="openCreateFileDialog()">新增文件</button>
28+
<button onclick="deleteSelectedFiles()">批量删除</button>
29+
<button onclick="openComplexSearchFileDialog()">复杂查询</button>
30+
</div>
31+
<div class="table-container">
32+
<table id="files-table">
33+
<thead>
34+
<tr>
35+
<th><input type="checkbox" id="files-select-all" onclick="toggleAllFiles(this)"></th>
36+
<th>ID</th>
37+
<th>类型</th>
38+
<th>路径</th>
39+
<th>引用计数</th>
40+
<th>组ID</th>
41+
<th>操作</th>
42+
</tr>
43+
</thead>
44+
<tbody>
45+
<!-- 数据将通过JavaScript动态填充 -->
46+
</tbody>
47+
</table>
48+
</div>
49+
</section>

‎file_classification_webapi/static/partials/group-relations.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!-- 组关系管理 -->
2+
<section id="group-relations" class="tab-content">
3+
<h2>组关系管理</h2>
4+
<!-- 简单搜索表单 -->
5+
<div class="search-form">
6+
<div class="form-row">
7+
<div class="form-group">
8+
<label for="group-relation-first-id">第一组ID:</label>
9+
<input type="number" id="group-relation-first-id" placeholder="请输入第一组ID">
10+
</div>
11+
<div class="form-group">
12+
<label for="group-relation-second-id">第二组ID:</label>
13+
<input type="number" id="group-relation-second-id" placeholder="请输入第二组ID">
14+
</div>
15+
<div class="form-group">
16+
<label for="group-relation-type">关系类型:</label>
17+
<input type="text" id="group-relation-type" placeholder="请输入关系类型">
18+
</div>
19+
<div class="form-group">
20+
<button onclick="listGroupRelationsByFilter()">搜索</button>
21+
<button onclick="resetGroupRelationFilter()">重置</button>
22+
</div>
23+
</div>
24+
</div>
25+
26+
<div class="toolbar">
27+
<button onclick="openCreateGroupRelationDialog()">新增关系</button>
28+
<button onclick="deleteSelectedGroupRelations()">批量删除</button>
29+
<button onclick="openComplexSearchGroupRelationDialog()">复杂查询</button>
30+
</div>
31+
<div class="table-container">
32+
<table id="group-relations-table">
33+
<thead>
34+
<tr>
35+
<th><input type="checkbox" id="group-relations-select-all" onclick="toggleAllGroupRelations(this)"></th>
36+
<th>第一组ID</th>
37+
<th>第二组ID</th>
38+
<th>关系类型</th>
39+
<th>操作</th>
40+
</tr>
41+
</thead>
42+
<tbody>
43+
<!-- 数据将通过JavaScript动态填充 -->
44+
</tbody>
45+
</table>
46+
</div>
47+
</section>

‎file_classification_webapi/static/partials/group-tags.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!-- 组标签关联 -->
2+
<section id="group-tags" class="tab-content">
3+
<h2>组标签关联</h2>
4+
<!-- 简单搜索表单 -->
5+
<div class="search-form">
6+
<div class="form-row">
7+
<div class="form-group">
8+
<label for="group-tag-group-id">组ID:</label>
9+
<input type="number" id="group-tag-group-id" placeholder="请输入组ID">
10+
</div>
11+
<div class="form-group">
12+
<label for="group-tag-tag-id">标签ID:</label>
13+
<input type="number" id="group-tag-tag-id" placeholder="请输入标签ID">
14+
</div>
15+
<div class="form-group">
16+
<button onclick="listGroupTagsByFilter()">搜索</button>
17+
<button onclick="resetGroupTagFilter()">重置</button>
18+
</div>
19+
</div>
20+
</div>
21+
22+
<div class="toolbar">
23+
<button onclick="openCreateGroupTagDialog()">新增关联</button>
24+
<button onclick="deleteSelectedGroupTags()">批量删除</button>
25+
<button onclick="openComplexSearchGroupTagDialog()">复杂查询</button>
26+
</div>
27+
<div class="table-container">
28+
<table id="group-tags-table">
29+
<thead>
30+
<tr>
31+
<th><input type="checkbox" id="group-tags-select-all" onclick="toggleAllGroupTags(this)"></th>
32+
<th>组ID</th>
33+
<th>标签ID</th>
34+
<th>操作</th>
35+
</tr>
36+
</thead>
37+
<tbody>
38+
<!-- 数据将通过JavaScript动态填充 -->
39+
</tbody>
40+
</table>
41+
</div>
42+
</section>

‎file_classification_webapi/static/partials/groups.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!-- 组管理 -->
2+
<section id="groups" class="tab-content">
3+
<h2>组管理</h2>
4+
<!-- 简单搜索表单 -->
5+
<div class="search-form">
6+
<div class="form-row">
7+
<div class="form-group">
8+
<label for="group-id">组ID:</label>
9+
<input type="number" id="group-id" placeholder="请输入组ID">
10+
</div>
11+
<div class="form-group">
12+
<label for="group-name">组名:</label>
13+
<input type="text" id="group-name" placeholder="请输入组名">
14+
</div>
15+
<div class="form-group">
16+
<button onclick="listGroupsByFilter()">搜索</button>
17+
<button onclick="resetGroupFilter()">重置</button>
18+
</div>
19+
</div>
20+
</div>
21+
22+
<div class="toolbar">
23+
<button onclick="openCreateGroupDialog()">新增组</button>
24+
<button onclick="deleteSelectedGroups()">批量删除</button>
25+
<button onclick="openComplexSearchGroupDialog()">复杂查询</button>
26+
</div>
27+
<div class="table-container">
28+
<table id="groups-table">
29+
<thead>
30+
<tr>
31+
<th><input type="checkbox" id="groups-select-all" onclick="toggleAllGroups(this)"></th>
32+
<th>ID</th>
33+
<th>名称</th>
34+
<th>描述</th>
35+
<th>引用计数</th>
36+
<th>父组ID</th>
37+
<th>操作</th>
38+
</tr>
39+
</thead>
40+
<tbody>
41+
<!-- 数据将通过JavaScript动态填充 -->
42+
</tbody>
43+
</table>
44+
</div>
45+
</section>

‎file_classification_webapi/static/partials/header.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<header>
2+
<h1>文件分类系统</h1>
3+
</header>

‎file_classification_webapi/static/partials/modal.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!-- 弹窗模态框 -->
2+
<div id="modal" class="modal">
3+
<div class="modal-content">
4+
<span class="close" onclick="closeModal()">&times;</span>
5+
<div id="modal-body">
6+
<!-- 弹窗内容将通过JavaScript动态填充 -->
7+
</div>
8+
</div>
9+
</div>

0 commit comments

Comments
 (0)