一、效果预览

安装脚本后打开工时管理程序。你会看到：

1. 自动捕获页面加载后自动拦截接口数据，无需手动操作。按理说，
2. 浮动面板右下角出现两个渐变按钮。
3. 一键复制点击即可复制整理好的周报内容。
4. AI 调用本地 Ollama 大模型，智能提炼关键成果。

二、主要原理：如何“拦截”接口数据

现代网页应用通常通过 XMLHttpRequest 或 Fetch API 与服务器通信。主要思路是"劫持"这些原生方法，在数据返回时插入自定义逻辑。

拦截 XMLHttpRequest

// 保存原始方法
const originalXhrOpen = XMLHttpRequest.prototype.open;按理说，const originalXhrSend = XMLHttpRequest.prototype.send;// 重写 open 方法，记录请求的 URL
XMLHttpRequest.prototype.open = function {
this._url = url;// 保存 URL 供后续判断
this._method = method;return originalXhrOpen.apply;}，// 重写 send 方法，监听特定接口的响应
XMLHttpRequest.prototype.send = function {
if ) {
this.addEventListener {
const response = this.responseText;const data = JSON.parse;if {
localStorage.setItem);console.log，}
});}
return originalXhrSend.apply;}，

拦截 Fetch API

const originalFetch = window.fetch;window.fetch = function {
const url = typeof input === 'string'?input : input.url;return originalFetch.apply.n(response => {
if ) {
const clonedResponse = response.clone;// 必须克隆，否则原响应会被消费
clonedResponse.json.n(data => {
if {
capturedData = data.data;console.log，}
});}
return response;// 保持页面正常逻辑
});}，

三、数据处理：从原始 JSON 到周报文本

捕获到的是日历形式的原始数据，需要完成以下步骤：

1. 筛选本周的记录；
2. 按项目名称分组汇总；
3. 格式化为易读的周报文本。

计算本周日期范围

function getCurrentWeekDates {
const today = new Date;const dayOfWeek = today.getDay;话说回来，// 0=周日1=周一...
const mondayOffset = dayOfWeek === 0?-6 : 1 - dayOfWeek;const dates =;for { // 周一到周五
const date = new Date;date.setDate + mondayOffset + i);dates.push)，// YYYY-MM-DD
}
return dates;}
function formatDate {
const year = date.getFullYear;const month = String + 1).padStart;const day = String).padStart;return `${year}-${month}-${day}`;}

数据分组与格式化

function processData {
const weekDates = getCurrentWeekDates;const projectMap = new Map;weekDates.forEach(dateStr => {
const dayData = data.find;if {
dayData.list.forEach(item => {
const projectName = item.projectShortName || '其他';老实说，const content = item.remark || '';if {
if ) {
projectMap.set;说起来，}
projectMap.get.push;}
})，}
});let result = '';说起来，let index = 1;说起来，projectMap.forEach => {
const mergedContent = contents.join;result += `${numberToChinese}、${projectName}：${mergedContent}
`;index++，});话说回来，return result.trim;}
function numberToChinese { /* 简单数字转中文示例 */ return;}

四、AI 集成：调用本地 Ollama 大模型进行智能

Llama/Ollama 配置示例

const OLLAMA_URL = 'http://localhost:11434/api/generate';const MODEL_NAME = 'qwen2:3b';// 示例模型名称
const TEMPERATURE = 0.2;const MAX_TOKENS = 1024;

调用 AI 完成工作内容

async function summarizeWithAI {
const prompt =
`请将以下本周工作内容进行智能要求：
- 按项目维度汇总工作内容；- 合并相似工作项，- 提炼关键成果；- 使用简洁、专业的语言；
原始工作内容：
${content}
请输出后的工作内容：`;return new Promise => {
GM_xmlhttpRequest({
至于method，'POST',url: OLLAMA_URL,headers: { 'Content-Type': 'application/json' },data: JSON.stringify({
model这方面。MODEL_NAME,prompt: prompt,stream: false,options: { temperature: TEMPERATURE,max_tokens: MAX_TOKENS }
}),onload {
try {
const result = JSON.parse;resolve，} catch { reject;}
},onerror { reject;},timeout: 120000 // 本地模型可能耗时较长
});})，说起来，}

五、UI 交互：纯原生 DOM 建立浮动面板与弹窗功能

创建渐变按钮面板

function createButtonPanel {
const panel = document.createElement;说起来，panel.id ='tm-button-panel';panel.style.cssText =
`position:fixed;bottom:10px，right:10px;怎么说呢，z-index:9999;其实，display:flex;flex-direction:column;gap:8px，`;// 查看原始工时按钮
const viewBtn = document.createElement;viewBtn.innerText='📋 查看本周工时';viewBtn.style.cssText=getButtonStyle;话说回来，viewBtn.onclick==>{
const txt=localStorage.getItem||'暂无数据';showDataModal;}，// AI 智能按钮
const aiBtn=document.createElement;aiBtn.innerText='🤖 AI 智能';aiBtn.style.cssText=getButtonStyle;aiBtn.onclick=async=>{
showLoadingModal;try{
const raw=localStorage.getItem||'';老实说，const summary=await summarizeWithAI;closeLoadingModal;showDataModal;}catch{
closeLoadingModal;showNotification;}
}，panel.appendChild;panel.appendChild;document.body.appendChild;}
function getButtonStyle{
return `padding:10px 16px;background:linear-gradient(135deg。${
color1},${color2});color:#fff，border:none;border-radius:8px;cursor:pointer;font-size:13px;其实，font-weight:bold;box-shadow:
0 4px 12px rgba;transition:.3s ease;`，}

弹窗与通知工具函数

function showDataModal{
// 简易实现，仅演示结构
alert;}
function showLoadingModal{ /* 可自行实现 loading UI */ }
function closeLoadingModal{ /* 隐藏 loading UI */ }
function showNotification{
console;}

六、完整脚本使用教程

安装步骤

1. Tampermonkey ：`Chrome`/`Edge` 浏览器搜索并安装 Tampermonkey 插件。
2. 新建脚本：

配置 Ollama

If you need AI summarization:

• # 安装 Ollama 本地工具
• # 拉取模型，例如 qwen2:3b
• # 开启服务保持终端运行。例如 # ollama run qwen2:3b

使用流程

4️⃣ 点击 “🤖 AI 智能”，等待模型返回精炼版本后弹出展示。

步骤	操作	效果
1️⃣	登录工时程序	脚本自动在后台捕获数据
2️⃣	点击 “📋 查看本周工时”	弹出原始数据窗口
3️⃣	点击 “📝 复制到剪贴板”	内容已复制，可直接粘贴至周报文档

七、技术亮点

"?">"?">"?" " "?">"?">"?" "?">"?">"?" "?">"?">

"h"

"H"

"

"

"

---

---

---

---

技术点	实现方式	价值
接口拦截	重写 XHR / Fetch 原型方法，无侵入式获取后端返回	无需后端改造即可获取所需数据	数据持久化	利用 localStorage 缓存，中断刷新不丢失	支持延迟查看与二次处理	AI 集成	Ollama 本地大模型调用，本机运行无网络泄露风险	提高报告质量同时保障隐私 "?" 跨域请求	GM_xmlhttpRequest 油猴特权 API 突破 CORS 限制	使用较稳定获取外部服务结果	" 零依赖 UI	纯原生 DOM + CSS 体积小、加载快	兼容性好、不冲突	"

---