自学资源查找器

它解决的问题

搜索某个主题的学习资源时，工程师往往要在搜索引擎、视频站点、官方文档和 GitHub 之间来回切换。输入 Python爬虫 或 React 教程 后，筛选质量、判断类型、整理链接会打断学习节奏；如果只是想要一份带简介和可点击链接的清单，手工搜集的成本就显得过高。

核心能力与工作流程

• 读取 assets/finder_template.html，获取自包含的 HTML 组件代码。
• 通过 show_widget 渲染组件，传入标题、组件代码和加载提示。
• 用户在输入框中填写主题，按回车或点击搜索按钮即可查询。
• 使用类型标签筛选：全部、视频、文档、博客、项目。
• 在关键词框中输入文本进一步过滤，并按简介 A→Z 或 Z→A 排序。
• 结果以两列表格呈现：左侧为资源简介，右侧为 打开 → 按钮，链接在新窗口加载。

数据替换有三种方式：

1. 修改 fetchResources()，对接真实 API。
2. 运行 scripts/search_resources.py 生成 JSON，再注入模板。
3. 采用混合模式：先请求 API，失败时降级到模拟数据。

适用边界与注意点

• 当前 MOCK_DATA 覆盖 Python 爬虫、React、机器学习、Vue3、Django 等主题，仅用于演示。
• 组件宽度适配 680px 的面板，部署时需确认容器尺寸。
• 样式全部内联，没有外部依赖，首次渲染速度较快。
• scripts/search_resources.py 是预留了 B 站、GitHub、官方文档接口的 TODO 框架，需自行补全实现。
• 所有资源链接均使用 target="_blank"，请留意弹出窗口策略。