Skip to content

Commit 5f1110a

Browse files
PythonSmall-QPythonSmall-Q
committed
feat: Add showcase and ecosystem links to documentation and enhance footer across multiple pages
- Added "展示" and "生态" navigation links to ADD_LANGUAGE.html, API_REFERENCE.html, ARCHITECTURE.html, DEVELOPMENT.html, and WIDGETS_DEV_GUIDE.html. - Implemented a consistent footer with links to GitHub, Releases, README, Changelog, Contributing, and Privacy Policy in the same HTML files. - Updated index.html to reflect the new versioning system and added a real-time clock feature. - Introduced a new browser extension index.html and VS Code extension index.html with detailed documentation and links. - Enhanced styles.css to support new clock hand animations and parallax effects for widgets.
1 parent 1650639 commit 5f1110a

12 files changed

Lines changed: 559 additions & 9 deletions

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ TimeLens is more than a desktop app — it's a screen-time platform with cross-t
4545
| Component | Path | Description |
4646
| --------- | ---- | ----------- |
4747
| **TimeLens Desktop** | `src/` + `src-tauri/` | Main Tauri + React application with tracking, insights, widgets, and settings. |
48-
| **Browser Extension** | `browser-extension/` | Collects domain-level web usage and merges it with desktop stats. |
49-
| **VS Code Extension** | `vscode-extension/` | Tracks coding sessions by language, project, and workspace. |
48+
| **Browser Extension** | [`browser-extension/`](browser-extension/index.html) | Collects domain-level web usage and merges it with desktop stats. |
49+
| **VS Code Extension** | [`vscode-extension/`](vscode-extension/index.html) | Tracks coding sessions by language, project, and workspace. |
5050

5151
---
5252

‎README_zh.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ TimeLens 不仅是一款桌面应用，更是围绕屏幕时间构建的跨端
4343
| 组件 | 路径 | 说明 |
4444
| ---- | ---- | ---- |
4545
| **TimeLens 桌面端** | `src/` + `src-tauri/` | 基于 Tauri + React 的主应用，提供追踪、洞察、小组件与完整设置。 |
46-
| **浏览器扩展** | `browser-extension/` | 采集域名级网页使用数据，并与桌面端数据合并展示。 |
47-
| **VS Code 扩展** | `vscode-extension/` | 按语言、项目、工作区统计编码时长，开发者生产力洞察的好帮手。 |
46+
| **浏览器扩展** | [`browser-extension/`](browser-extension/index.html) | 采集域名级网页使用数据，并与桌面端数据合并展示。 |
47+
| **VS Code 扩展** | [`vscode-extension/`](vscode-extension/index.html) | 按语言、项目、工作区统计编码时长，开发者生产力洞察的好帮手。 |
4848

4949
---
5050

‎browser-extension/index.html‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>TimeLens Browser Companion · 浏览器扩展</title>
7+
<meta name="description" content="TimeLens 官方浏览器扩展，自动追踪标签页使用时长，与桌面端同步，支持 Chrome 与 Firefox。" />
8+
<link rel="icon" type="image/png" href="../docs/assets/icon.png" />
9+
<link rel="stylesheet" href="../docs/styles.css" />
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
13+
</head>
14+
<body>
15+
<!-- Navbar -->
16+
<nav class="navbar">
17+
<div class="nav-container">
18+
<a href="../docs/index.html" class="nav-brand">
19+
<img src="../docs/assets/icon.svg" alt="TimeLens" class="nav-icon" />
20+
<span class="nav-title">TimeLens</span>
21+
</a>
22+
<div class="nav-links">
23+
<a href="../docs/index.html#features" class="nav-link">功能</a>
24+
<a href="../docs/index.html#showcase" class="nav-link">展示</a>
25+
<a href="../docs/index.html#ecosystem" class="nav-link">生态</a>
26+
<a href="../docs/index.html#quickstart" class="nav-link">快速开始</a>
27+
<a href="../docs/index.html#docs" class="nav-link">文档</a>
28+
<a href="https://github.com/PythonSmall-Q/TimeLens" class="nav-link" target="_blank" rel="noopener">
29+
<svg class="github-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
30+
GitHub
31+
</a>
32+
</div>
33+
<button class="nav-toggle" id="navToggle" aria-label="切换导航">
34+
<span></span><span></span><span></span>
35+
</button>
36+
</div>
37+
</nav>
38+
39+
<div class="content-wrapper">
40+
<aside class="sidebar">
41+
<ul class="sidebar-nav">
42+
<li><a href="../docs/index.html">← 返回首页</a></li>
43+
<li><a href="../docs/DEVELOPMENT.html">开发指南</a></li>
44+
<li><a href="../docs/ARCHITECTURE.html">架构文档</a></li>
45+
<li><a href="../docs/API_REFERENCE.html">API 参考</a></li>
46+
<li><a href="../vscode-extension/index.html">VS Code 扩展</a></li>
47+
<li><a href="../docs/ADD_LANGUAGE.html">添加语言</a></li>
48+
</ul>
49+
</aside>
50+
51+
<main class="content-main">
52+
<nav class="breadcrumb">
53+
<a href="../docs/index.html">文档首页</a>
54+
<span>/</span>
55+
<span>浏览器扩展</span>
56+
</nav>
57+
58+
<h1>TimeLens Browser Companion</h1>
59+
<p>官方 <strong>TimeLens 浏览器扩展</strong>，用于跟踪浏览器标签页使用时长，并通过本地 API 与桌面端同步数据，让屏幕时间报告同时覆盖桌面应用与网页浏览。</p>
60+
61+
<div style="margin: 24px 0;">
62+
<a href="https://microsoftedge.microsoft.com/addons/detail/ggpfddncgjgicapbhiifkcffbfjcdcpi" class="btn btn-primary" target="_blank" rel="noopener">
63+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
64+
Microsoft Edge 加载项
65+
</a>
66+
<a href="https://github.com/PythonSmall-Q/TimeLens/tree/master/browser-extension" class="btn btn-secondary" target="_blank" rel="noopener" style="margin-left:12px">
67+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
68+
浏览源码
69+
</a>
70+
</div>
71+
72+
<hr />
73+
74+
<h2 id="overview">概述</h2>
75+
<p>该扩展以 Manifest V3 Service Worker 形式运行。它会记录你在各个浏览器标签页上的停留时间（按域名聚合），并通过本地 HTTP API（<code>127.0.0.1:49152</code>）将使用会话转发给 TimeLens 桌面端。</p>
76+
77+
<h2 id="features">功能特性</h2>
78+
<table>
79+
<thead>
80+
<tr><th>功能</th><th>说明</th></tr>
81+
</thead>
82+
<tbody>
83+
<tr><td><strong>标签页会话跟踪</strong></td><td>自动记录当前活跃标签页的停留时间，切换标签页、最小化浏览器或进入空闲状态时自动暂停。</td></tr>
84+
<tr><td><strong>空闲检测</strong></td><td>借助 <code>chrome.idle</code> API，当你超过 60 秒未操作键盘/鼠标时停止计时。</td></tr>
85+
<tr><td><strong>离线缓冲</strong></td><td>桌面端离线时，会话数据先在本地排队缓存，待桌面端恢复后自动批量上报。</td></tr>
86+
<tr><td><strong>弹出面板</strong></td><td>点击工具栏图标，即可查看今日热门域名、近期会话记录以及与 TimeLens 的连接状态。</td></tr>
87+
<tr><td><strong>多语言界面</strong></td><td>内置英文与简体中文支持，与桌面端语言设置保持一致。</td></tr>
88+
<tr><td><strong>Chrome & Firefox</strong></td><td>同时支持 Chromium 内核浏览器与 Firefox。</td></tr>
89+
</tbody>
90+
</table>
91+
92+
<h2 id="architecture">架构</h2>
93+
<pre><code>browser-extension/
94+
├── manifest.json # Manifest V3 配置
95+
├── background.js # Service Worker —— 跟踪与同步逻辑
96+
├── popup.html / popup.js # 工具栏弹出面板 UI
97+
├── popup.css # 弹出面板样式
98+
├── i18n.js # 轻量国际化辅助模块
99+
├── _locales/ # 本地化字符串（en、zh_CN）
100+
├── icons/ # 扩展图标
101+
└── scripts/ # 构建脚本</code></pre>
102+
<ul>
103+
<li><code>background.js</code> 负责处理 tabs、windows、idle 和 alarms 事件，将当前会话保存在 <code>chrome.storage.local</code> 中，并通过 POST 请求将已完成的会话发送至桌面端 API。</li>
104+
<li><code>popup.js</code> 读取缓存的会话数据，并调用 <code>/api/screen-time/today</code> 接口渲染弹出面板。</li>
105+
</ul>
106+
107+
<h2 id="build">构建</h2>
108+
<pre><code># 代码检查
109+
npm run lint
110+
111+
# 构建 Firefox 版本（默认）
112+
npm run build
113+
114+
# 构建 Chrome 版本
115+
npm run build:chrome</code></pre>
116+
117+
<h2 id="download">下载安装</h2>
118+
<p>浏览器扩展已上架 Microsoft Edge 加载项商店，点击上方按钮或下方链接即可安装：</p>
119+
<p>
120+
<a href="https://microsoftedge.microsoft.com/addons/detail/ggpfddncgjgicapbhiifkcffbfjcdcpi" target="_blank" rel="noopener">前往 Microsoft Edge 加载项安装 →</a>
121+
</p>
122+
123+
<h2 id="related">相关文档</h2>
124+
<ul>
125+
<li><a href="../README.md">TimeLens 桌面端 README</a></li>
126+
<li><a href="../README_zh.md">TimeLens 桌面端 README（中文）</a></li>
127+
<li><a href="../docs/API_REFERENCE.html">API 参考</a></li>
128+
</ul>
129+
</main>
130+
</div>
131+
132+
<!-- Footer -->
133+
<footer class="footer">
134+
<div class="footer-container">
135+
<div class="footer-brand">
136+
<img src="../docs/assets/icon.svg" alt="TimeLens" class="footer-icon" />
137+
<span>TimeLens</span>
138+
</div>
139+
<p class="footer-copy">MIT License · Built with Tauri & React · 由社区驱动</p>
140+
<div class="footer-links">
141+
<a href="https://github.com/PythonSmall-Q/TimeLens" target="_blank" rel="noopener">GitHub</a>
142+
<a href="https://github.com/PythonSmall-Q/TimeLens/releases" target="_blank" rel="noopener">Releases</a>
143+
<a href="../README.md">README</a>
144+
<a href="../CHANGELOG.md">Changelog</a>
145+
<a href="../CONTRIBUTING.md">Contributing</a>
146+
<a href="../PRIVACY_POLICY.md">Privacy</a>
147+
</div>
148+
</div>
149+
</footer>
150+
151+
<script>
152+
const navToggle = document.getElementById('navToggle');
153+
const navLinks = document.querySelector('.nav-links');
154+
navToggle.addEventListener('click', () => {
155+
navLinks.classList.toggle('open');
156+
});
157+
</script>
158+
</body>
159+
</html>

‎docs/ADD_LANGUAGE.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
</a>
2020
<div class="nav-links">
2121
<a href="index.html#features" class="nav-link">功能</a>
22+
<a href="index.html#showcase" class="nav-link">展示</a>
23+
<a href="index.html#ecosystem" class="nav-link">生态</a>
2224
<a href="index.html#quickstart" class="nav-link">快速开始</a>
2325
<a href="index.html#docs" class="nav-link">文档</a>
2426
<a href="https://github.com/PythonSmall-Q/TimeLens" class="nav-link" target="_blank" rel="noopener">
@@ -249,5 +251,24 @@ <h2 id="submit">提交你的翻译</h2>
249251
const navLinks = document.querySelector('.nav-links');
250252
navToggle.addEventListener('click', () => navLinks.classList.toggle('open'));
251253
</script>
254+
255+
<!-- Footer -->
256+
<footer class="footer">
257+
<div class="footer-container">
258+
<div class="footer-brand">
259+
<img src="assets/icon.svg" alt="TimeLens" class="footer-icon" />
260+
<span>TimeLens</span>
261+
</div>
262+
<p class="footer-copy">MIT License · Built with Tauri & React · 由社区驱动</p>
263+
<div class="footer-links">
264+
<a href="https://github.com/PythonSmall-Q/TimeLens" target="_blank" rel="noopener">GitHub</a>
265+
<a href="https://github.com/PythonSmall-Q/TimeLens/releases" target="_blank" rel="noopener">Releases</a>
266+
<a href="../README.md">README</a>
267+
<a href="../CHANGELOG.md">Changelog</a>
268+
<a href="../CONTRIBUTING.md">Contributing</a>
269+
<a href="../PRIVACY_POLICY.md">Privacy</a>
270+
</div>
271+
</div>
272+
</footer>
252273
</body>
253274
</html>

‎docs/API_REFERENCE.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
</a>
2020
<div class="nav-links">
2121
<a href="index.html#features" class="nav-link">功能</a>
22+
<a href="index.html#showcase" class="nav-link">展示</a>
23+
<a href="index.html#ecosystem" class="nav-link">生态</a>
2224
<a href="index.html#quickstart" class="nav-link">快速开始</a>
2325
<a href="index.html#docs" class="nav-link">文档</a>
2426
<a href="https://github.com/PythonSmall-Q/TimeLens" class="nav-link" target="_blank" rel="noopener">
@@ -334,5 +336,24 @@ <h2 id="frontend-usage">前端调用示例</h2>
334336
const navLinks = document.querySelector('.nav-links');
335337
navToggle.addEventListener('click', () => navLinks.classList.toggle('open'));
336338
</script>
339+
340+
<!-- Footer -->
341+
<footer class="footer">
342+
<div class="footer-container">
343+
<div class="footer-brand">
344+
<img src="assets/icon.svg" alt="TimeLens" class="footer-icon" />
345+
<span>TimeLens</span>
346+
</div>
347+
<p class="footer-copy">MIT License · Built with Tauri & React · 由社区驱动</p>
348+
<div class="footer-links">
349+
<a href="https://github.com/PythonSmall-Q/TimeLens" target="_blank" rel="noopener">GitHub</a>
350+
<a href="https://github.com/PythonSmall-Q/TimeLens/releases" target="_blank" rel="noopener">Releases</a>
351+
<a href="../README.md">README</a>
352+
<a href="../CHANGELOG.md">Changelog</a>
353+
<a href="../CONTRIBUTING.md">Contributing</a>
354+
<a href="../PRIVACY_POLICY.md">Privacy</a>
355+
</div>
356+
</div>
357+
</footer>
337358
</body>
338359
</html>

‎docs/ARCHITECTURE.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
</a>
2020
<div class="nav-links">
2121
<a href="index.html#features" class="nav-link">功能</a>
22+
<a href="index.html#showcase" class="nav-link">展示</a>
23+
<a href="index.html#ecosystem" class="nav-link">生态</a>
2224
<a href="index.html#quickstart" class="nav-link">快速开始</a>
2325
<a href="index.html#docs" class="nav-link">文档</a>
2426
<a href="https://github.com/PythonSmall-Q/TimeLens" class="nav-link" target="_blank" rel="noopener">
@@ -244,5 +246,24 @@ <h2 id="security">安全模型</h2>
244246
const navLinks = document.querySelector('.nav-links');
245247
navToggle.addEventListener('click', () => navLinks.classList.toggle('open'));
246248
</script>
249+
250+
<!-- Footer -->
251+
<footer class="footer">
252+
<div class="footer-container">
253+
<div class="footer-brand">
254+
<img src="assets/icon.svg" alt="TimeLens" class="footer-icon" />
255+
<span>TimeLens</span>
256+
</div>
257+
<p class="footer-copy">MIT License · Built with Tauri & React · 由社区驱动</p>
258+
<div class="footer-links">
259+
<a href="https://github.com/PythonSmall-Q/TimeLens" target="_blank" rel="noopener">GitHub</a>
260+
<a href="https://github.com/PythonSmall-Q/TimeLens/releases" target="_blank" rel="noopener">Releases</a>
261+
<a href="../README.md">README</a>
262+
<a href="../CHANGELOG.md">Changelog</a>
263+
<a href="../CONTRIBUTING.md">Contributing</a>
264+
<a href="../PRIVACY_POLICY.md">Privacy</a>
265+
</div>
266+
</div>
267+
</footer>
247268
</body>
248269
</html>

‎docs/DEVELOPMENT.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@
2020
</a>
2121
<div class="nav-links">
2222
<a href="index.html#features" class="nav-link">功能</a>
23+
<a href="index.html#showcase" class="nav-link">展示</a>
24+
<a href="index.html#ecosystem" class="nav-link">生态</a>
2325
<a href="index.html#quickstart" class="nav-link">快速开始</a>
2426
<a href="index.html#docs" class="nav-link">文档</a>
2527
<a href="https://github.com/PythonSmall-Q/TimeLens" class="nav-link" target="_blank" rel="noopener">
@@ -241,5 +243,24 @@ <h2 id="contributing">贡献代码</h2>
241243
const navLinks = document.querySelector('.nav-links');
242244
navToggle.addEventListener('click', () => navLinks.classList.toggle('open'));
243245
</script>
246+
247+
<!-- Footer -->
248+
<footer class="footer">
249+
<div class="footer-container">
250+
<div class="footer-brand">
251+
<img src="assets/icon.svg" alt="TimeLens" class="footer-icon" />
252+
<span>TimeLens</span>
253+
</div>
254+
<p class="footer-copy">MIT License · Built with Tauri & React · 由社区驱动</p>
255+
<div class="footer-links">
256+
<a href="https://github.com/PythonSmall-Q/TimeLens" target="_blank" rel="noopener">GitHub</a>
257+
<a href="https://github.com/PythonSmall-Q/TimeLens/releases" target="_blank" rel="noopener">Releases</a>
258+
<a href="../README.md">README</a>
259+
<a href="../CHANGELOG.md">Changelog</a>
260+
<a href="../CONTRIBUTING.md">Contributing</a>
261+
<a href="../PRIVACY_POLICY.md">Privacy</a>
262+
</div>
263+
</div>
264+
</footer>
244265
</body>
245266
</html>

‎docs/WIDGETS_DEV_GUIDE.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
</a>
2020
<div class="nav-links">
2121
<a href="index.html#features" class="nav-link">功能</a>
22+
<a href="index.html#showcase" class="nav-link">展示</a>
23+
<a href="index.html#ecosystem" class="nav-link">生态</a>
2224
<a href="index.html#quickstart" class="nav-link">快速开始</a>
2325
<a href="index.html#docs" class="nav-link">文档</a>
2426
<a href="https://github.com/PythonSmall-Q/TimeLens" class="nav-link" target="_blank" rel="noopener">
@@ -316,5 +318,24 @@ <h2 id="debugging">Debugging Tips</h2>
316318
const navLinks = document.querySelector('.nav-links');
317319
navToggle.addEventListener('click', () => navLinks.classList.toggle('open'));
318320
</script>
321+
322+
<!-- Footer -->
323+
<footer class="footer">
324+
<div class="footer-container">
325+
<div class="footer-brand">
326+
<img src="assets/icon.svg" alt="TimeLens" class="footer-icon" />
327+
<span>TimeLens</span>
328+
</div>
329+
<p class="footer-copy">MIT License · Built with Tauri & React · 由社区驱动</p>
330+
<div class="footer-links">
331+
<a href="https://github.com/PythonSmall-Q/TimeLens" target="_blank" rel="noopener">GitHub</a>
332+
<a href="https://github.com/PythonSmall-Q/TimeLens/releases" target="_blank" rel="noopener">Releases</a>
333+
<a href="../README.md">README</a>
334+
<a href="../CHANGELOG.md">Changelog</a>
335+
<a href="../CONTRIBUTING.md">Contributing</a>
336+
<a href="../PRIVACY_POLICY.md">Privacy</a>
337+
</div>
338+
</div>
339+
</footer>
319340
</body>
320341
</html>

0 commit comments

Comments
 (0)