20260526152617

code/docusaurus/.trae/documents/bookmarks_import_plan.md

@@ -0,0 +1,48 @@
+# 书签导入与整理计划
+
+## 需求分析
+用户希望将浏览器书签文件 `D:\bookmarks_2026_5_26.html` 中的内容导入并整理到 `docs/resources.mdx` 文件中。
+
+## 书签文件结构分析
+
+从读取的书签文件中识别出以下主要分组：
+
+### 第一层分组
+1. **AI 智能助手** - 包含 ChatGPT、腾讯元宝、v0 等
+2. **前端开发** - 包含多个子文件夹：
+   - 图标库 (expo icons, iconfont, icones, lucide)
+   - 前端模板库 (uiverse, codepen, htmlrev, lottiefiles, mockuphone)
+   - TinyMCE 相关
+   - Uniapp 相关
+   - 前端组件库 (Arco Design)
+   - React Native 第三方库
+   - 插画库 (undraw, storyset, manypixels)
+   - React Native 开发相关
+3. **Python** - PaddlePaddle 相关
+
+## 实现方案
+
+### 步骤
+1. 创建一个 Node.js 脚本来解析书签 HTML 文件
+2. 将解析结果转换为资源导航所需的分组格式
+3. 更新 `docs/resources.mdx` 文件
+
+### 修改文件
+- `docs/resources.mdx` - 更新为解析后的书签内容
+
+## 输出格式
+使用现有的 `SearchableLinkGrid` 组件格式，保持分组结构清晰。
+
+## 过滤规则
+1. 跳过重复链接
+2. 清理过长的标题（超过50字符截断）
+3. 提取有意义的描述信息
+
+## 风险评估
+- 文件较大（50KB+），需要处理大量数据
+- 部分链接可能失效，建议用户后续验证
+
+## 测试计划
+1. 解析书签文件
+2. 生成新的 resources.mdx
+3. 启动开发服务器验证显示效果

code/docusaurus/.trae/documents/search_filter_plan.md

@@ -0,0 +1,102 @@
+# 资源导航搜索过滤功能实现计划
+
+## 需求分析
+
+用户希望在 `docs/resources.mdx` 文件中添加一个搜索框，实现本地过滤功能，可以根据关键词过滤显示的资源卡片。
+
+## 现有代码结构分析
+
+### 当前文件结构
+
+* `docs/resources.mdx` - 资源导航页面，使用 LinkGrid 和 LinkCard 组件
+
+* `src/components/Link/LinkCard.tsx` - 单个链接卡片组件
+
+* `src/components/Link/LinkGrid.tsx` - 卡片网格容器组件
+
+### 当前实现方式
+
+`LinkGrid` 组件直接渲染所有子元素，没有过滤功能。
+
+## 实现方案
+
+### 方案选择
+
+创建一个新的带搜索功能的组件 `SearchableLinkGrid`，包含：
+
+1. 搜索输入框
+2. 过滤逻辑（基于 title 和 description）
+3. 集成现有 LinkCard 组件
+
+### 修改文件列表
+
+| 文件                                           | 操作 | 说明           |
+| -------------------------------------------- | -- | ------------ |
+| `src/components/Link/SearchableLinkGrid.tsx` | 新建 | 带搜索过滤的网格组件   |
+| `docs/resources.mdx`                         | 修改 | 引入新组件并重构内容结构 |
+
+## 实现步骤
+
+### 步骤 1: 创建 SearchableLinkGrid 组件
+
+* 使用 React useState 管理搜索关键词
+
+* 使用 useMemo 进行过滤计算
+
+* 支持按 title 和 description 进行模糊搜索
+
+### 步骤 2: 修改 resources.mdx
+
+* 引入新组件
+
+* 将现有 LinkCard 包装在 SearchableLinkGrid 中
+
+## 技术实现细节
+
+### 搜索过滤逻辑
+
+```typescript
+// 过滤逻辑
+const filteredCards = useMemo(() => {
+  if (!searchTerm) return children
+  const lowerTerm = searchTerm.toLowerCase()
+  return // 过滤匹配的卡片
+}, [searchTerm, children])
+```
+
+### 组件设计
+
+* 搜索框位于网格上方
+
+* 实时过滤，无需点击搜索按钮
+
+* 支持中英文搜索
+
+## 风险评估
+
+### 潜在风险
+
+1. **性能问题**：如果卡片数量很大，过滤可能有性能问题
+
+   * 缓解：使用 useMemo 缓存过滤结果
+
+2. **样式冲突**：新组件可能与现有样式冲突
+
+   * 缓解：使用独立的 CSS 模块
+
+3. **React 版本兼容性**：需要确保使用 React 19 兼容的写法
+
+   * 缓解：使用标准 React hooks
+
+## 依赖检查
+
+* 项目已安装 React 19 和相关类型定义
+
+* 使用现有样式系统 (CSS Modules)
+
+## 测试计划
+
+1. 启动开发服务器验证功能
+2. 测试搜索功能是否正常工作
+3. 验证样式是否正确显示
+