hookehuyr

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>
......