feat(nutrition): 添加营养分析历史记录删除和图片预览功能

- 新增删除营养分析记录功能，支持本地状态更新和API调用
- 添加图片全屏预览功能，支持缩放和手势操作
- 实现Liquid Glass风格的删除按钮，包含兼容性处理
- 优化历史记录页面布局和交互体验
- 更新Memory Bank文档，添加Liquid Glass按钮实现指南

.kilocode/rules/memory-bank/tasks.md

@@ -61,4 +61,88 @@ const styles = StyleSheet.create({
 - `app/water/detail.tsx`
 - `app/profile/goals.tsx`
 - `app/workout/history.tsx`
-- `app/challenges/[id]/leaderboard.tsx`
+- `app/challenges/[id]/leaderboard.tsx`
+
+## Liquid Glass 风格图标按钮实现
+
+**最后更新**: 2025-10-16
+
+### 问题描述
+在应用中实现符合 Liquid Glass 设计风格的图标按钮，需要考虑毛玻璃效果和兼容性处理。
+
+### 解决方案
+使用 `GlassView` 组件实现毛玻璃效果，并提供不支持 Liquid Glass 的设备的降级方案。
+
+### 实现模式
+
+#### 1. 导入必要的组件和函数
+```typescript
+import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
+```
+
+#### 2. 检查设备支持情况
+```typescript
+const isGlassAvailable = isLiquidGlassAvailable();
+```
+
+#### 3. 实现条件渲染的按钮
+```typescript
+<TouchableOpacity
+  onPress={handlePress}
+  disabled={isLoading}
+  activeOpacity={0.7}
+>
+  {isGlassAvailable ? (
+    <GlassView
+      style={styles.glassButton}
+      glassEffectStyle="clear"  // 或 "regular"
+      tintColor="rgba(244, 67, 54, 0.2)"  // 自定义色调
+      isInteractive={true}  // 启用交互反馈
+    >
+      <Ionicons name="trash-outline" size={20} color="#F44336" />
+    </GlassView>
+  ) : (
+    <View style={[styles.glassButton, styles.fallbackButton]}>
+      <Ionicons name="trash-outline" size={20} color="#F44336" />
+    </View>
+  )}
+</TouchableOpacity>
+```
+
+#### 4. 定义样式
+```typescript
+const styles = StyleSheet.create({
+  glassButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,  // 圆形按钮
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',  // 保证玻璃边界圆角效果
+  },
+  fallbackButton: {
+    borderWidth: 1,
+    borderColor: 'rgba(244, 67, 54, 0.3)',
+    backgroundColor: 'rgba(244, 67, 54, 0.1)',
+  },
+});
+```
+
+### 重要注意事项
+1. **兼容性处理**：必须使用 `isLiquidGlassAvailable()` 检查设备支持情况
+2. **overflow: 'hidden'**：GlassView 组件需要设置此属性以保证圆角效果
+3. **降级样式**：为不支持 Liquid Glass 的设备提供视觉上相似的替代方案
+4. **交互反馈**：设置 `isInteractive={true}` 启用原生的触觉反馈
+5. **色调自定义**：通过 `tintColor` 属性自定义按钮的颜色主题
+
+### 常用配置
+- **glassEffectStyle**: "clear"（透明）或 "regular"（常规）
+- **tintColor**: 根据按钮功能选择合适的颜色
+  - 删除操作：红色系 `rgba(244, 67, 54, 0.2)`
+  - 确认操作：绿色系 `rgba(76, 175, 80, 0.2)`
+  - 信息操作：蓝色系 `rgba(33, 150, 243, 0.2)`
+
+### 参考实现
+- `app/food/nutrition-analysis-history.tsx` - 删除按钮实现
+- `components/glass/button.tsx` - 通用 Glass 按钮组件
+- `app/(tabs)/_layout.tsx` - 标签栏按钮实现

.kilocode/rules/memory-bank/tech.md

@@ -16,7 +16,7 @@
 ### UI 框架和样式
 - **React Native Elements**: UI 组件库
 - **Expo UI**: 0.2.0-beta.7 - Expo UI 组件
-- **Expo Glass Effect**: 0.1.4 - Liquid Glass 毛玻璃效果
+- **Expo Glass Effect**: 0.1.4 - Liquid Glass 毛玻璃效果, 优先使用
 - **React Native Reanimated**: 4.1.0 - 高性能动画库
 - **React Native Gesture Handler**: 2.28.0 - 手势处理
 - **React Native SVG**: 15.12.1 - SVG 图形支持