Skip to content

Commit 4802821

Browse files
DataEraserCDataEraserC
committed
feat(home): 添加系统主页并设置为默认显示
- 在index.html中添加home-placeholder占位符 - 在loader.js中注册home.html部分视图加载 - 修改loader.js默认显示主页而非第一个tab - 在main.js中为主页链接添加活动状态处理 - 在sidebar.html中添加系统主页导航链接 - 创建home.html包含系统说明文档内容 - 实现主页内容展示及样式设计 - 添加数据结构和功能说明文档 - 提供系统使用指南和操作说明
1 parent a3c5ca0 commit 4802821

5 files changed

Lines changed: 117 additions & 11 deletions

File tree

‎file_classification_webapi/static/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515

1616
<!-- 主内容区 -->
1717
<main class="content">
18+
<div id="home-placeholder"></div>
1819
<div id="files-placeholder"></div>
1920
<div id="groups-placeholder"></div>
2021
<div id="tags-placeholder"></div>

‎file_classification_webapi/static/js/loader.js‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ function loadPartials() {
99
const partials = [
1010
{ id: 'header-placeholder', file: 'partials/header.html' },
1111
{ id: 'sidebar-placeholder', file: 'partials/sidebar.html' },
12+
{ id: 'home-placeholder', file: 'partials/home.html' },
1213
{ id: 'files-placeholder', file: 'partials/files.html' },
1314
{ id: 'groups-placeholder', file: 'partials/groups.html' },
1415
{ id: 'tags-placeholder', file: 'partials/tags.html' },
@@ -43,14 +44,9 @@ function initializeApp() {
4344
// 初始化应用功能
4445
// 这里可以添加一些初始化逻辑
4546

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-
}
47+
// 默认显示主页
48+
const homeTab = document.getElementById('home');
49+
if (homeTab) {
50+
homeTab.style.display = 'block';
5551
}
5652
}

‎file_classification_webapi/static/js/main.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,8 +104,10 @@ function initTabs() {
104104
// 设置当前链接为活动状态
105105
this.classList.add('active');
106106

107-
// 页面刚打开时自动搜索一次
108-
autoSearch(target);
107+
// 页面刚打开时自动搜索一次，但主页不需要搜索
108+
if (target !== 'home') {
109+
autoSearch(target);
110+
}
109111
});
110112
});
111113
}

‎file_classification_webapi/static/partials/home.html‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!-- 系统主页 -->
2+
<section id="home" class="tab-content" style="display: none;">
3+
<h2>文件分类系统说明</h2>
4+
5+
<div class="documentation">
6+
<div class="doc-section">
7+
<h3>📘 系统概述</h3>
8+
<p>文件分类系统是一个用于管理和组织文件、组、标签及其关联关系的系统。通过该系统，用户可以：</p>
9+
<ul>
10+
<li>管理文件信息</li>
11+
<li>创建和管理组层次结构</li>
12+
<li>为文件和组添加标签</li>
13+
<li>建立组之间的关系</li>
14+
<li>通过多种条件查询和筛选数据</li>
15+
</ul>
16+
</div>
17+
18+
<div class="doc-section">
19+
<h3>📂 数据结构</h3>
20+
<h4>文件 (Files)</h4>
21+
<ul>
22+
<li><strong>ID</strong>: 文件唯一标识符</li>
23+
<li><strong>类型</strong>: 文件类型（如 txt, pdf, doc 等）</li>
24+
<li><strong>路径</strong>: 文件存储路径</li>
25+
<li><strong>引用计数</strong>: 文件被引用的次数</li>
26+
<li><strong>组ID</strong>: 文件所属组的ID</li>
27+
</ul>
28+
29+
<h4>组 (Groups)</h4>
30+
<ul>
31+
<li><strong>ID</strong>: 组唯一标识符</li>
32+
<li><strong>名称</strong>: 组名称</li>
33+
<li><strong>描述</strong>: 组描述信息</li>
34+
<li><strong>引用计数</strong>: 组被引用的次数</li>
35+
<li><strong>父组ID</strong>: 父组的ID（用于构建组层次结构）</li>
36+
</ul>
37+
38+
<h4>标签 (Tags)</h4>
39+
<ul>
40+
<li><strong>ID</strong>: 标签唯一标识符</li>
41+
<li><strong>名称</strong>: 标签名称</li>
42+
<li><strong>描述</strong>: 标签描述信息</li>
43+
<li><strong>引用计数</strong>: 标签被引用的次数</li>
44+
</ul>
45+
46+
<h4>文件组关联 (File Groups)</h4>
47+
<ul>
48+
<li><strong>文件ID</strong>: 文件的ID</li>
49+
<li><strong>组ID</strong>: 组的ID</li>
50+
</ul>
51+
52+
<h4>组标签关联 (Group Tags)</h4>
53+
<ul>
54+
<li><strong>组ID</strong>: 组的ID</li>
55+
<li><strong>标签ID</strong>: 标签的ID</li>
56+
</ul>
57+
58+
<h4>组关系 (Group Relations)</h4>
59+
<ul>
60+
<li><strong>第一个组ID</strong>: 第一个组的ID</li>
61+
<li><strong>第二个组ID</strong>: 第二个组的ID</li>
62+
<li><strong>关系类型</strong>: 组关系的类型</li>
63+
</ul>
64+
</div>
65+
66+
<div class="doc-section">
67+
<h3>⚙️ 系统功能</h3>
68+
<h4>基本操作</h4>
69+
<ul>
70+
<li><strong>新增</strong>: 在各个模块中添加新的记录</li>
71+
<li><strong>修改</strong>: 编辑现有记录的信息</li>
72+
<li><strong>删除</strong>: 删除不需要的记录（支持单个和批量删除）</li>
73+
<li><strong>查询</strong>: 通过简单搜索或复杂条件搜索查找记录</li>
74+
</ul>
75+
76+
<h4>搜索功能</h4>
77+
<ul>
78+
<li><strong>简单搜索</strong>: 在每个模块的顶部提供基于常用字段的搜索框</li>
79+
<li><strong>复杂查询</strong>: 支持构建复杂的查询条件，可以组合多个条件进行精确查询</li>
80+
</ul>
81+
82+
<h4>分页功能</h4>
83+
<p>所有模块的数据展示都支持分页，可以：</p>
84+
<ul>
85+
<li>选择每页显示的记录数量（10/20/50/100）</li>
86+
<li>跳转到指定页面</li>
87+
<li>查看总记录数和总页数</li>
88+
</ul>
89+
</div>
90+
91+
<div class="doc-section">
92+
<h3>🧭 使用说明</h3>
93+
<ol>
94+
<li>使用左侧导航栏切换不同的功能模块</li>
95+
<li>在每个模块中，可以使用顶部的搜索框进行简单查询</li>
96+
<li>点击"复杂查询"按钮可以打开高级查询界面</li>
97+
<li>使用"新增"按钮可以添加新的记录</li>
98+
<li>表格中的操作列提供了针对单条记录的编辑和删除功能</li>
99+
<li>使用表格顶部的复选框可以选择多条记录进行批量操作</li>
100+
</ol>
101+
</div>
102+
</div>
103+
</section>

‎file_classification_webapi/static/partials/sidebar.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
</div>
66
<nav>
77
<ul>
8+
<li><a href="#home" class="nav-link active" data-target="home" title="系统主页">
9+
<span class="nav-text">系统主页</span>
10+
<span class="nav-icon">🏠</span>
11+
</a></li>
812
<li><a href="#files" class="nav-link" data-target="files" title="文件管理">
913
<span class="nav-text">文件管理</span>
1014
<span class="nav-icon">📁</span>

0 commit comments

Comments
 (0)