fix: 修复头像页面圆形背景变形

- 将相机图标背景从 p-[16rpx] 改为固定 w-[96rpx] h-[96rpx]
- 添加 flex 布局确保图标居中
- 确保 rounded-full 始终形成正圆

@@ -5,6 +5,23 @@
 
 ---
 
+## [2026-02-03] - 修复头像页面圆形背景变形
+
+### 修复
+- 修复头像页面相机图标背景变形问题
+  - 将相机图标的背景容器从 `p-[16rpx]` 改为固定宽高 `w-[96rpx] h-[96rpx]`
+  - 添加 `flex items-center justify-center` 确保图标在圆形中完美居中
+  - 配合 `rounded-full` 确保背景始终保持正圆形，不受图标组件尺寸影响
+
+---
+
+**详细信息**：
+- **影响文件**: `src/pages/avatar/index.vue`
+- **技术栈**: Vue 3, Taro 4, TailwindCSS
+- **测试状态**: ✅ 已修复
+
+---
+
 ## [2026-02-03] - 修复知识库页面样式问题
 
 ### 修复

@@ -15,7 +15,7 @@
         <nut-avatar size="large" class="!w-[240rpx] !h-[240rpx] shadow-lg border-4 border-gray-100">
           <img :src="avatarUrl" style="object-fit: cover; width: 100%; height: 100%;" />
         </nut-avatar>
-        <view class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black/30 rounded-full p-[16rpx]">
+        <view class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-[96rpx] h-[96rpx] bg-black/30 rounded-full">
           <IconFont name="photograph" color="#fff" size="24" />
         </view>
       </view>