style(favorites): 优化收藏页面样式和交互设计

重构操作区域布局，新增独立的查看按钮并优化删除按钮样式
为所有操作按钮添加文字说明以提升可访问性
使用颜色区分操作类型（蓝色查看，红色删除）
调整列表项标题显示，支持最多两行文本并优化行高
优化按钮点击热区和交互反馈效果

+## [2026-01-31] - 我的收藏页面样式优化
+
+### 优化
+- 优化我的收藏页面 (`src/pages/favorites`) 的布局和样式
+  - 重构操作区，新增"查看"按钮并优化"删除"按钮
+  - 为所有操作按钮添加文字说明，提升可访问性
+  - 使用颜色区分操作类型（查看为蓝色，删除为红色）
+  - 调整列表项标题显示，支持最多两行文本 (`line-clamp-2`)
+  - 优化按钮点击热区和反馈效果
+
+---
+
+**详细信息**：
+- **影响文件**: src/pages/favorites/index.vue
+- **技术栈**: Vue 3, Tailwind CSS
+- **测试状态**: 已通过
+- **备注**:
+  - 响应用户关于新增查看按钮和图标文字说明的需求
+
 ## [2026-01-31] - 知识库页面添加产品点击跳转
 
 ### 新增
@@ -97,7 +116,7 @@
 - **影响文件**: src/pages/index/index.vue
 - **技术栈**: Vue 3, Taro 4, NutUI, IconFont
 - **测试状态**: 已通过
-- **备注**: 
+- **备注**:
   - 统一首页与资料列表页的图标样式
   - 提升视觉一致性
   - 更符合整体设计风格
@@ -115,7 +134,7 @@
 - **影响文件**: ~/.claude/rules/code-commenting.md, ~/.claude/rules/README.md, README.md
 - **技术栈**: 文档
 - **测试状态**: N/A
-- **备注**: 
+- **备注**:
   - 所有函数和方法必须使用 JSDoc 注释
   - 包含功能说明、参数说明、返回值说明
   - 复杂逻辑需要详细注释
@@ -135,7 +154,7 @@
 - **影响文件**: CLAUDE.md, ~/.claude/rules/changelog-automation.md, ~/.claude/rules/README.md
 - **技术栈**: 文档
 - **测试状态**: N/A
-- **备注**: 
+- **备注**:
   - 提升 Claude Code 中文用户体验
   - 建立自动化变更日志记录机制
   - 每次任务完成后自动记录到 docs/CHANGELOG.md

@@ -21,7 +21,7 @@
     <view class="w-[706rpx] mt-[32rpx] flex flex-col gap-[24rpx]">
       <view v-for="(item, index) in filteredList" :key="index"
         class="bg-white rounded-[24rpx] p-[32rpx] shadow-sm flex items-center justify-between">
-        <view class="flex items-center flex-1 mr-[24rpx]" @tap="onView(item)">
+        <view class="flex items-center flex-1 mr-[24rpx]">
           <!-- Icon (Text Type Icons as requested) -->
           <view class="w-[80rpx] h-[80rpx] rounded-[16rpx] flex items-center justify-center mr-[24rpx]"
             :class="item.iconBgClass">
@@ -29,8 +29,8 @@
           </view>
 
           <!-- Text Content -->
-          <view class="flex flex-col flex-1">
-            <view class="text-[32rpx] text-[#1F2937] font-bold mb-[8rpx] line-clamp-1">{{ item.title }}</view>
+          <view class="flex flex-col flex-1 min-w-0">
+            <view class="text-[32rpx] text-[#1F2937] font-bold mb-[8rpx] line-clamp-2 leading-[1.4]">{{ item.title }}</view>
             <view class="flex flex-col items-start gap-[8rpx]">
               <view class="bg-gray-100 px-[12rpx] py-[4rpx] rounded-[8rpx] text-[24rpx] text-[#9CA3AF] mt-1">{{ item.category
                 }}</view>
@@ -40,10 +40,17 @@
         </view>
 
         <!-- Action Buttons -->
-        <view class="flex items-center gap-[16rpx]">
+        <view class="flex flex-col items-end gap-[16rpx] ml-[16rpx] flex-shrink-0">
+          <!-- View Button -->
+          <view class="flex items-center justify-center px-[20rpx] py-[10rpx] bg-blue-50 rounded-full active:bg-blue-100 transition-colors" @tap.stop="onView(item)">
+            <IconFont name="eye" size="14" color="#2563EB" class="mr-[6rpx]" />
+            <text class="text-[24rpx] text-blue-600 font-medium leading-none">查看</text>
+          </view>
+
           <!-- Delete Button -->
-          <view class="p-[10rpx]" @tap.stop="onDelete(item)">
-            <IconFont name="del" size="18" color="#999" />
+          <view class="flex items-center justify-center px-[20rpx] py-[10rpx] bg-red-50 rounded-full active:bg-red-100 transition-colors" @tap.stop="onDelete(item)">
+            <IconFont name="del" size="14" color="#EF4444" class="mr-[6rpx]" />
+            <text class="text-[24rpx] text-red-500 font-medium leading-none">删除</text>
           </view>
         </view>
       </view>