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

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

style(favorites): 优化收藏页面样式和交互设计
重构操作区域布局，新增独立的查看按钮并优化删除按钮样式为所有操作按钮添加文字说明以提升可访问性使用颜色区分操作类型（蓝色查看，红色删除）调整列表项标题显示，支持最多两行文本并优化行高优化按钮点击热区和交互反馈效果
hookehuyr
Commit 5d2f4495a3db177a7d83ab4a6c060c1736bb23dc 5d2f4495 1 parent d734ec21
Showing 2 changed files with 35 additions and 9 deletions
docs/CHANGELOG.md
src/pages/favorites/index.vue
--- a/docs/CHANGELOG.md
View file @5d2f449
+++ b/docs/CHANGELOG.md
View file @5d2f449
+## [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
--- a/src/pages/favorites/index.vue
View file @5d2f449
+++ b/src/pages/favorites/index.vue
View file @5d2f449
@@ -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="flex flex-col flex-1 min-w-0">
-            <view class="text-[32rpx] text-[#1F2937] font-bold mb-[8rpx] line-clamp-1">{{ item.title }}</view>
+            <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)">
+          <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="18" color="#999" />
+            <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>