我是如何开发 Recaply 的

使用 tailwindcss + daisyui 帮我设计一下这个插件的 popup 的 UI，我希望popup内包含：

一个url列表，用来展示AI帮用户生成的日报列表
底部一个查看更多按钮，打开网页跳转到用户的主页

帮我重新设计一下这个 popup 的首页，我希望列表页里展示的是用户昨天的浏览历史统计，然后底部一个按钮询问用户是否生成浏览日报

{
  "date": "2023-10-15",
  "browsing_data": [
    {
      "url": "https://example.com/news",
      "title": "Breaking News: Major Event",
      "time_spent": "5 minutes",
      "category": "新闻",
      "content": "今日发生了一起重大事件，涉及全球经济波动。专家表示，这一事件可能会对金融市场产生长期影响……"
    },
    {
      "url": "https://example.com/work",
      "title": "Project Management Tips",
      "time_spent": "15 minutes",
      "category": "工作",
      "content": "本文分享了5个提升项目管理效率的技巧：1. 明确目标；2. 合理分配资源；3. 定期沟通……"
    },
    {
      "url": "https://example.com/entertainment",
      "title": "Top 10 Movies of 2023",
      "time_spent": "20 minutes",
      "category": "娱乐",
      "content": "2023年最受欢迎的10部电影包括《电影A》、《电影B》和《电影C》。这些电影在票房和口碑上均表现出色……"
    }
  ]
}

你是一个专业的浏览日报生成助手，负责将用户的浏览记录转换为精美的日报。请严格按照以下要求生成报告：

### 输入数据格式：
用户会提供浏览记录，包含日期、总浏览时间、使用语言和详细浏览数据。

### 日报生成要求：

#### 1. **内容分类与整理**
- 首先分析所有浏览内容
- 如果页面类别是"other"或缺失，请根据URL、标题和内容自行分类，可能的类别包括：
  - 技术（编程、开发、IT等）
  - 新闻（时事、媒体等）
  - 娱乐（视频、游戏、音乐等）
  - 社交媒体（社交平台、论坛等）
  - 工作（办公、协作工具等）
  - 学习（教育、培训、文档等）
  - 购物（电商、产品等）
  - 其他（无法明确分类的内容）
- 将所有浏览内容按照实际分类组织，不要保留"other"类别

#### 2. **语言适配**
- 根据 \`language\` 字段选择日报语言（如 zh-CN 用中文，en-US 用英文）
- 确保所有内容、标题和描述都使用对应语言

#### 3. **日报标题与日期**
- 中文格式: "# 📅 YYYY年MM月DD日浏览日报"
- 英文格式: "# 📅 Daily Browsing Report for YYYY-MM-DD"

#### 4. **浏览概览**
- 创建一个简短的概览部分，总结关键统计信息：
  - 总浏览时间
  - 访问的网站数量
  - 主要浏览的内容类别（按重新分类后的结果）
  - 为增强视觉效果，使用表情符号如 🕒 (时间)、📊 (统计)

#### 5. **分类内容展示**
- 根据你的分类结果，为每个类别创建二级标题
  - 中文: "## 📰 新闻" / "## 💻 技术" / "## 🎮 娱乐" 等
  - 英文: "## 📰 News" / "## 💻 Technology" / "## 🎮 Entertainment" 等
- 在每个类别下，列出相关页面：
  - 页面标题（可链接到原网址）
  - 浏览时间
  - 根据内容生成的1-2句摘要，概括用户在此页面可能获取的主要信息
  - 使用列表格式，并辅以表情符号增强可读性

#### 6. **今日亮点**
- 从各类别中挑选1-3个最重要或浏览时间最长的页面作为亮点
- 中文: "## ✨ 今日亮点"
- 英文: "## ✨ Today's Highlights"

#### 7. **总结与建议**
- 对浏览行为进行总结，并提供建议
- 中文: "## 📝 总结与建议"
- 英文: "## 📝 Summary & Suggestions"
- 分析用户的浏览模式，提出合理的建议，如时间分配、关注点等
- 使用友好的语气，辅以表情符号

#### 8. **Markdown格式排版**
- 使用标准Markdown语法，确保适当缩进和空行
- 善用加粗、斜体、链接等格式元素
- 合理使用表情符号增强视觉效果

### 重要说明：
1. 直接输出纯Markdown格式的日报内容
2. 不要添加任何代码块标记（如 \`\`\`markdown 或 \`\`\`）
3. 不要在输出中包含系统提示或解释
4. 报告内容要基于提供的浏览数据，不要编造不存在的内容
5. 确保生成的内容专业、有序且美观
6. 内容分类是日报生成的关键，请仔细分析内容后再进行合理分类

请直接开始生成日报内容，无需添加任何前缀或后缀说明。

import { test, expect, describe } from 'bun:test';
import { generateReport } from '../src/lib/report';

async function getTestHistory() {
    const file1 = Bun.file('./examples/how-i-build-recaply-blog.md');
    const text1 = await file1.text();

    const file2 = Bun.file('./examples/bun-reading-file.md');
    const text2 = await file2.text();

    const file3 = Bun.file('./examples/dom-to-markdown.md');
    const text3 = await file3.text();

    const file4 = Bun.file('./examples/bilibili-李白-大鹏赋.md');
    const text4 = await file4.text();

    const file5 = Bun.file('./examples/v2ex-t-1022439.md');
    const text5 = await file5.text();

    return {
        date: '2025-03-02',
        language: 'zh-CN', // zh-CN, en-US
        total_time: '3h 10m',
        browsing_data: [
            {
                url: 'https://feiye.me/posts/how-i-build-recaply/',
                title: '我是如何开发 recaply 的',
                category: 'work',
                time_spent: '4m',
                content: text1.slice(0, 1000),
            },
            {
                url: 'https://bun.sh/guides/read-file/string',
                title: 'Read a file as a string with Bun',
                category: 'learning',
                time_spent: '1m',
                content: text2.slice(0, 1000),
            },
            {
                url: 'https://github.com/romansky/dom-to-semantic-markdown',
                title: 'romansky/dom-to-semantic-markdown: DOM to Semantic-Markdown for use with LLMs',
                category: 'work',
                time_spent: '2m',
                content: text3.slice(0, 1000),
            },
            {
                url: 'https://www.bilibili.com/video/BV1sVPieyE8x/?spm_id_from=333.788.player.switch&vd_source=b006e936c76c138f12ddafe94e135085',
                title: '李白《大鹏赋》译文（二）鲲鹏神化',
                category: 'enterainment',
                time_spent: '26m',
                content: text4.slice(0, 1000),
            },
            {
                url: 'https://www.v2ex.com/t/1022439',
                title: "基于 LangChain 的开源 GPT 向量 + 知识数据库，帮助个人或企业实现自己的专属 AI 问答助手 - V2EX",
                category: 'enterainment',
                time_spent: '15m',
                content: text5.slice(0, 1000),
            }
        ]
    };
}

describe('Report', () => {
    test('should return a report', async () => {
        const history = await getTestHistory();

        const response = await generateReport(history, import.meta.env.GOOGLE_AI_STUDIO_API_TOKEN ?? '');
        expect(response.length).toBeGreaterThan(100);
    });
});

let activeTab = {
  tabId: number;
  startTime: number; // 开始计时的时间
  url: string;
}
chrome.tabs.onActivated.addListener(async (activeInfo) => {
  // tab 切换，记录之前那个tab的停留时间
});

chrome.tabs.onUpdated.addListener(async (activeInfo) => {
  // 页面刷新，或者打开新的标签页，开始给当前tab重新计时，或者给新tab计时
});