-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
178 lines (163 loc) · 15 KB
/
index.html
File metadata and controls
178 lines (163 loc) · 15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="zh-CN" class="antialiased h-full"> <!-- h-full: 确保html元素占满整个视口高度 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.svg">
<meta name="author" content="git-hub-cc">
<meta name="description" content="CodeHub 是一个为开发者量身打造的极速查询工具，旨在帮助用户快速检索常用命令、框架资料和其他开发相关知识，并集成了个人笔记管理功能。">
<meta name="keywords" content="CodeHub, 开发者工具, 命令查询, 框架文档, 个人笔记, Linux, PowerShell, Git, Docker, K8S, npm, Maven, Pip, Scoop, SQL, SpringBoot, Vue, React, Tailwind, 设计模式, 正则表达式, Markdown, HTTP协议, 模糊搜索, 离线可用">
<title>CodeHub</title>
<!-- 外部库 -->
<script src="lib/fuse.min.js"></script>
<script src="lib/marked.min.js"></script>
<!-- 自定义样式 -->
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/output.css">
<!-- 新增：引入 Prism.js 语法高亮库 -->
<link href="cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" rel="stylesheet"/>
<script defer="" src="cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script defer="" src="cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
<!-- 主题初始化脚本: 放在head中以防止页面加载时出现主题闪烁 -->
<script>
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
</script>
</head>
<body class="bg-slate-50 dark:bg-slate-900 text-slate-600 dark:text-slate-400 font-sans transition-colors duration-300 h-full overflow-hidden"> <!-- h-full, overflow-hidden: 配合flex布局，使页面内容撑满视口且body不滚动 -->
<!-- 页面主容器: 采用flex列布局，占满整个高度 -->
<div class="container mx-auto p-4 md:p-8 max-w-[1400px]">
<!-- ======================= 页头 (Header) ======================= -->
<header class="flex justify-between items-start mb-6 flex-shrink-0"> <!-- flex-shrink-0: 防止页头在内容过多时被压缩 -->
<div>
<h1 class="text-4xl md:text-5xl font-bold text-slate-800 dark:text-white">CodeHub</h1>
<p class="text-slate-500 dark:text-slate-400 mt-2">一个为开发者打造的极速查询工具，支持命令、框架等的快速检索，同时集成笔记管理功能。</p>
</div>
<div class="flex items-center gap-4">
<!-- 模式切换器 -->
<nav>
<div id="mode-switcher" class="bg-slate-200 dark:bg-slate-800 p-1 rounded-full flex text-sm font-medium">
<button id="mode-toggle-commands" class="px-4 py-1.5 rounded-full transition-colors">命令</button>
<button id="mode-toggle-frameworks" class="px-4 py-1.5 rounded-full transition-colors">框架</button>
<button id="mode-toggle-other" class="px-4 py-1.5 rounded-full transition-colors">其它</button>
<button id="mode-toggle-notes" class="px-4 py-1.5 rounded-full transition-colors">笔记</button>
</div>
</nav>
<!-- 主题切换按钮 -->
<button id="theme-toggle" class="p-2 rounded-full text-slate-500 hover:text-cyan-500 dark:text-slate-400 dark:hover:text-cyan-400 hover:bg-slate-200 dark:hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-50 dark:focus:ring-offset-slate-900 focus:ring-cyan-500 transition-all duration-300">
<img id="theme-icon-sun" src="img/icons/sun.svg" class="h-6 w-6" alt="浅色模式">
<img id="theme-icon-moon" src="img/icons/moon.svg" class="h-6 w-6 hidden" alt="深色模式">
</button>
</div>
</header>
<!-- ======================= 可搜索视图 (命令、框架、其它) ======================= -->
<!-- flex-grow: 使main元素填充剩余空间; overflow-hidden: 配合内部滚动 -->
<main id="searchable-view" class="opacity-0 transition-opacity duration-300 flex-grow overflow-hidden flex flex-col">
<!-- 搜索和过滤区域 (粘性定位) -->
<div class="flex flex-col md:flex-row gap-4 mb-8 sticky top-4 z-20 bg-slate-50/80 dark:bg-slate-900/80 backdrop-blur-sm p-2 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm flex-shrink-0">
<div class="relative flex-grow">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"><img src="img/icons/search.svg" class="h-5 w-5 text-slate-400" alt="搜索"></div>
<input type="text" id="searchable-input" placeholder="搜索..." class="w-full bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-white rounded-lg p-4 pl-12 focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 focus:outline-none transition-shadow">
</div>
<!-- 下拉选择器 -->
<div id="searchable-dropdown" class="relative md:w-48">
<button id="searchable-trigger" class="dropdown-trigger w-full bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-white rounded-lg p-4 focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 focus:outline-none transition-shadow flex items-center justify-between">
<span id="searchable-selected-text" class="font-medium"></span>
<img src="img/icons/chevron-down.svg" class="h-5 w-5 text-slate-400 transition-transform duration-200" alt="下拉">
</button>
<div id="searchable-options" class="dropdown-options hidden absolute top-full mt-2 w-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg shadow-lg overflow-hidden z-30"></div>
</div>
</div>
<!-- 结果和详情区域 -->
<div id="resultsContainer" class="grid grid-cols-1 lg:grid-cols-3 gap-8 flex-grow overflow-hidden">
<!-- 结果列表: overflow-y-auto使其内部可滚动; flex-grow max-h-full使其填充父容器高度 -->
<aside id="searchable-results-list" class="lg:col-span-1 bg-white/50 dark:bg-slate-800/50 p-2 sm:p-4 rounded-lg overflow-y-auto border border-slate-200 dark:border-slate-800 flex-grow max-h-full"></aside>
<!-- 详情视图 -->
<article id="searchable-details-view" class="lg:col-span-2 bg-white/50 dark:bg-slate-800/50 p-4 sm:p-6 rounded-lg overflow-y-auto border border-slate-200 dark:border-slate-800 flex-grow max-h-full"></article>
</div>
</main>
<!-- ======================= 笔记视图 ======================= -->
<main id="notes-view" class="hidden opacity-0 transition-opacity duration-300 flex-grow overflow-hidden flex flex-col">
<!-- 搜索和过滤区域 -->
<div class="flex flex-col md:flex-row gap-4 mb-8 sticky top-4 z-20 bg-slate-50/80 dark:bg-slate-900/80 backdrop-blur-sm p-2 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm flex-shrink-0">
<div class="relative flex-grow">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"><img src="img/icons/search.svg" class="h-5 w-5 text-slate-400" alt="搜索"></div>
<input type="text" id="noteSearchInput" placeholder="在当前笔记集中搜索..." class="w-full bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-white rounded-lg p-4 pl-12 focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 focus:outline-none transition-shadow">
</div>
<!-- 笔记集下拉选择器 -->
<div id="note-set-dropdown" class="relative md:w-48">
<button id="note-set-trigger" class="dropdown-trigger w-full bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-white rounded-lg p-4 focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 focus:outline-none transition-shadow flex items-center justify-between">
<span id="note-set-selected-text" class="font-medium"></span>
<img src="img/icons/chevron-down.svg" class="h-5 w-5 text-slate-400 transition-transform duration-200" alt="下拉">
</button>
<div id="note-set-options" class="dropdown-options hidden absolute top-full mt-2 w-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg shadow-lg overflow-y-auto z-30 max-h-60"></div>
</div>
<button id="add-set-btn" class="flex-shrink-0 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-200 rounded-lg px-4 font-medium hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors focus:ring-2 focus:ring-cyan-500 focus:outline-none">新建</button>
</div>
<!-- 笔记列表和详情区域 -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 flex-grow overflow-hidden">
<aside class="lg:col-span-1 bg-white/50 dark:bg-slate-800/50 p-2 sm:p-4 rounded-lg border border-slate-200 dark:border-slate-800 flex flex-col overflow-hidden">
<!-- 添加笔记表单 -->
<form id="addNoteForm" class="p-2 border-b border-slate-200 dark:border-slate-700 mb-2 flex-shrink-0">
<h3 id="addNoteFormTitle" class="text-md font-bold text-slate-800 dark:text-white mb-3"></h3>
<div class="flex items-start gap-2">
<textarea id="noteQuestion" class="flex-grow w-full bg-slate-100 dark:bg-slate-900 border border-slate-300 dark:border-slate-600 text-slate-800 dark:text-white rounded-md p-2 text-sm focus:ring-2 focus:ring-cyan-500 focus:outline-none" placeholder="输入新问题..." rows="2"></textarea>
<button type="submit" class="flex-shrink-0 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-200 rounded-lg px-4 py-2 font-medium hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors focus:ring-2 focus:ring-cyan-500 focus:outline-none">添加</button>
</div>
</form>
<!-- 笔记列表容器 -->
<div id="notesList" class="flex-grow overflow-y-auto space-y-1.5 pr-1"></div>
</aside>
<!-- 笔记详情视图 -->
<article id="noteDetailsView" class="lg:col-span-2 bg-white/50 dark:bg-slate-800/50 p-4 sm:p-6 rounded-lg overflow-y-auto border border-slate-200 dark:border-slate-800 flex-grow max-h-full"></article>
</div>
</main>
<!-- ======================= 页脚 (Footer) ======================= -->
<footer class="flex-shrink-0 flex items-center justify-center text-center text-sm text-slate-500 dark:text-slate-400 border-t border-slate-200 dark:border-slate-800 h-[80px]">
<p>
灵感源于 <a href="https://github.com/jaywcjlove/linux-command" target="_blank" rel="noopener noreferrer" class="text-cyan-600 hover:text-cyan-700 dark:text-cyan-500 dark:hover:text-cyan-400 font-semibold">jaywcjlove/linux-command</a>
<span class="inline-block mx-3">|</span>
当前项目地址：<a href="https://github.com/git-hub-cc/CodeHub" target="_blank" rel="noopener noreferrer" class="text-cyan-600 hover:text-cyan-700 dark:text-cyan-500 dark:hover:text-cyan-400 font-semibold">git-hub-cc/CodeHub</a>
<span class="inline-block mx-3">|</span>
©粤ICP备2024271251号
</p>
</footer>
</div>
<!-- ======================= 模态框 (Modals) ======================= -->
<!-- 确认模态框 -->
<div id="confirmation-modal" class="hidden fixed inset-0 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4 z-50 transition-opacity duration-300" role="dialog" aria-modal="true">
<div id="modal-dialog" class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl w-full max-w-md transform transition-all scale-95 opacity-0">
<div class="p-6"><h3 id="modal-title" class="text-xl font-bold text-slate-800 dark:text-white"></h3><p id="modal-message" class="mt-2 text-slate-600 dark:text-slate-400"></p></div>
<div class="bg-slate-50 dark:bg-slate-800/50 px-6 py-4 flex justify-end gap-3 rounded-b-xl">
<button id="modal-cancel-btn" class="px-4 py-2 rounded-lg bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 font-semibold hover:bg-slate-100 dark:hover:bg-slate-600 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">取消</button>
<button id="modal-confirm-btn" class="px-4 py-2 rounded-lg bg-red-600 border border-transparent text-white font-semibold hover:bg-red-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">确认删除</button>
</div>
</div>
</div>
<!-- 输入模态框 -->
<div id="input-modal" class="hidden fixed inset-0 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4 z-50 transition-opacity duration-300" role="dialog" aria-modal="true">
<div id="input-modal-dialog" class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl w-full max-w-md transform transition-all scale-95 opacity-0">
<div class="p-6">
<h3 id="input-modal-title" class="text-xl font-bold text-slate-800 dark:text-white"></h3>
<p id="input-modal-message" class="mt-2 text-slate-600 dark:text-slate-400"></p>
<input type="text" id="input-modal-field" class="w-full mt-4 bg-slate-100 dark:bg-slate-900 border border-slate-300 dark:border-slate-600 rounded-md p-2 focus:ring-2 focus:ring-cyan-500 focus:outline-none">
</div>
<div class="bg-slate-50 dark:bg-slate-800/50 px-6 py-4 flex justify-end gap-3 rounded-b-xl">
<button id="input-modal-cancel-btn" class="px-4 py-2 rounded-lg bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 font-semibold hover:bg-slate-100 dark:hover:bg-slate-600 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">取消</button>
<button id="input-modal-confirm-btn" class="px-4 py-2 rounded-lg bg-cyan-600 border border-transparent text-white font-semibold hover:bg-cyan-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500">确认</button>
</div>
</div>
</div>
<!-- ======================= 模板与脚本 ======================= -->
<!-- 用于动态加载HTML模板的隐藏容器 -->
<div id="template-container" hidden></div>
<!-- 应用脚本 (顺序很重要) -->
<script src="js/db.js"></script>
<script src="js/ui.js"></script>
<script src="js/notes.js"></script>
<script src="js/app.js"></script>
</body>
</html>