feat: login rest

2026-02-12 09:26:39 +08:00
parent e97fd30fa3
commit 5553e2711a
115 changed files with 4090 additions and 3499 deletions
@@ -12,7 +12,8 @@ Page({
        isLoading: false,
        current: 1,
        pageSize: 10,
-        hasMore: true
+        hasMore: true,
+        userInfo: null
    },

    onLoad() {
@@ -23,6 +24,13 @@ Page({
        if (typeof this.getTabBar === 'function' && this.getTabBar()) {
            this.getTabBar().setData({ selected: 2 });
        }
+
+        // Update user info for header
+        const app = getApp();
+        const info = app.globalData.userInfo || wx.getStorageSync('userInfo');
+        if (info) {
+            this.setData({ userInfo: info });
+        }
    },

    // Called by create post page
@@ -67,7 +75,7 @@ Page({
                return {
                    id: item.id,
                    user: publisher.nickName || publisher.name || '花友',
-                    avatar: avatarObj.url || '/assets/default_avatar.png',
+                    avatar: avatarObj.url,
                    content: item.content,
                    images: (item.imgList || []).map(img => img.url),
                    time: item.createdAtStr || '刚刚',
@@ -3,10 +3,8 @@
  <!-- Header with User Info -->
  <view class="community-header">
    <view class="user-info">
-      <view class="user-avatar">
-        <text>我</text>
-      </view>
-      <text class="user-name">我的花园</text>
+      <image class="header-avatar" src="{{userInfo.avatar && userInfo.avatar.url ? userInfo.avatar.url : userInfo.avatar}}" mode="aspectFill" />
+      <text class="user-name">{{userInfo.nickname || userInfo.name || '花友'}}</text>
    </view>
  </view>

@@ -31,7 +29,7 @@
          <text class="post-text">{{item.content}}</text>

          <!-- Image Grid -->
-          <view wx:if="{{item.images.length > 0}}" class="post-images-grid grid-{{item.images.length === 1 ? '1' : (item.images.length <= 4 ? '2' : '3')}}">
+          <view wx:if="{{item.images && item.images.length > 0}}" class="post-images-grid grid-{{item.images.length === 1 ? '1' : (item.images.length === 2 || item.images.length === 4 ? '2' : '3')}}">
            <view wx:for="{{item.images}}" wx:for-item="img" wx:key="*this" class="post-image-item" catchtap="previewImage" data-url="{{img}}" data-urls="{{item.images}}">
              <image 
                src="{{img}}" 
@@ -29,17 +29,12 @@ page {
  gap: 20rpx;
 }

-.community-header .user-avatar {
+.community-header .header-avatar {
  width: 80rpx;
  height: 80rpx;
-  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
-  color: #558B2F;
  border-radius: 16rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 32rpx;
+  background: #f5f5f5;
+  object-fit: cover;
 }

 .community-header .user-name {
@@ -135,31 +130,35 @@ page {
 /* Single Image */
 .grid-1 {
  display: flex;
-  width: 70%;
+  width: auto;
+  max-width: 70%;
 }

 .grid-1 .post-image-item {
  width: 100%;
-  border-radius: 16rpx;
+  aspect-ratio: 16 / 9;
+  border-radius: 8rpx;
+  overflow: hidden;
 }

-.grid-1 .post-image-item t-image {
-  border-radius: 16rpx;
+.grid-1 .post-image-item image {
+  border-radius: 8rpx;
 }

-/* 2-4 Images (2 columns) */
+/* 2 or 4 Images (2 columns) */
 .grid-2 {
  grid-template-columns: repeat(2, 1fr);
-  width: 75%;
+  width: 500rpx; /* Constrain width for 2 columns to look like partial grid */
 }

 .grid-2 .post-image-item {
  aspect-ratio: 1;
 }

-/* 5+ Images (3 columns) */
+/* 3, 5+ Images (3 columns) */
 .grid-3 {
  grid-template-columns: repeat(3, 1fr);
+  width: auto; /* Full available width */
 }

 .grid-3 .post-image-item {
@@ -1,5 +1,5 @@
 // pages/garden/add/index.js
-import { MOCK_PLANTS, CARE_TASK_ICONS } from '../../../utils/mockData';
+import { CARE_TASK_ICONS } from '../../../utils/mockData';
 import request from '../../../utils/request';
 import { requestSubscription, checkSubscriptionSettings } from '../../../utils/subscribe';

@@ -126,5 +126,18 @@ Page({
        if (!this.data.isLastPage && !this.data.isLoading) {
            this.loadPlants(false);
        }
+    },
+
+    onShareAppMessage() {
+        return {
+            title: '我的植物花园 - Sundynix Plant',
+            path: '/pages/garden/index'
+        };
+    },
+
+    onShareTimeline() {
+        return {
+            title: '我的植物花园 - Sundynix Plant'
+        };
    }
 })
@@ -8,6 +8,12 @@
            </view>
            <text class="subtitle">今天也要好好照顾它们哦</text>
        </view>
+        <view class="share-btn-wrap">
+            <button class="share-capsule" open-type="share">
+                <t-icon name="share" size="32rpx" color="#558B2F" />
+                <text>推荐给好友</text>
+            </button>
+        </view>
    </view>

    <view class="banner-container">
@@ -40,6 +40,39 @@
  font-weight: 500;
 }

+.page-header {
+  position: relative;
+}
+
+.share-btn-wrap {
+  position: absolute;
+  top: 40rpx; 
+  right: 40rpx;
+  z-index: 20;
+}
+
+.share-capsule {
+  display: flex !important;
+  align-items: center;
+  gap: 8rpx;
+  background: #F1F8E9 !important; /* Lighter background */
+  border-radius: 32rpx;
+  padding: 12rpx 24rpx !important;
+  margin: 0 !important;
+  border: 1px solid rgba(85, 139, 47, 0.2) !important;
+  box-shadow: 0 4rpx 12rpx rgba(85, 139, 47, 0.08); /* subtle shadow */
+  font-size: 24rpx;
+  font-weight: 600;
+  color: #558B2F;
+  line-height: normal !important;
+  width: auto !important;
+  min-height: 0 !important;
+}
+
+.share-capsule::after {
+  border: none !important;
+}
+
 .banner-container {
  margin: 0 40rpx 24rpx;
  height: 220rpx;
@@ -0,0 +1,103 @@
+
+import request from '../../../utils/request';
+
+Page({
+    data: {
+        plantId: '',
+        recordType: 'growth',
+        content: '',
+        image: ''
+    },
+
+    onLoad(options) {
+        if (options.plantId) {
+            this.setData({ plantId: options.plantId });
+        }
+    },
+
+    setRecordType(e) {
+        const type = e.currentTarget.dataset.type;
+        this.setData({ recordType: type });
+    },
+
+    onContentInput(e) {
+        this.setData({ content: e.detail.value });
+    },
+
+    handleChooseImage() {
+        wx.chooseMedia({
+            count: 1,
+            mediaType: ['image'],
+            sourceType: ['album', 'camera'],
+            success: (res) => {
+                this.setData({
+                    image: res.tempFiles[0].tempFilePath
+                });
+            }
+        });
+    },
+
+    handleRemoveImage() {
+        this.setData({ image: '' });
+    },
+
+    async handleAddRecord() {
+        if (!this.data.content.trim()) {
+            wx.showToast({ title: '请填写备注', icon: 'none' });
+            return;
+        }
+
+        if (!this.data.plantId) {
+            wx.showToast({ title: '缺少植物ID', icon: 'none' });
+            return;
+        }
+
+        wx.showLoading({ title: '保存中...', mask: true });
+
+        try {
+            let ossIds = [];
+
+            // 1. Upload Image if exists
+            if (this.data.image) {
+                const uploadRes = await request.upload(this.data.image);
+                // Correctly extract ID from nested 'file' object based on API response
+                if (uploadRes && uploadRes.file && uploadRes.file.id) {
+                    ossIds.push(uploadRes.file.id);
+                } else if (uploadRes && uploadRes.id) {
+                    // Fallback just in case
+                    ossIds.push(uploadRes.id);
+                } else {
+                    console.warn('Upload response structure mismatch:', uploadRes);
+                }
+            }
+
+            // 2. Prepare payload
+            const mapTitle = { growth: '生长记录', repot: '换盆记录', pest: '病虫害记录', other: '日常记录' };
+            const title = mapTitle[this.data.recordType] || '日常记录';
+
+            const payload = {
+                plantId: this.data.plantId,
+                ossIds: ossIds,
+                name: title,
+                tag: this.data.recordType,
+                desc: this.data.content.substring(0, 100),
+                content: this.data.content
+            };
+
+            // 3. Call Add API
+            await request.post('/plant/growth/add', payload);
+
+            wx.hideLoading();
+            wx.showToast({ title: '保存成功', icon: 'success' });
+
+            // 4. Navigate back, detail page will refresh in onShow
+            setTimeout(() => {
+                wx.navigateBack();
+            }, 1000);
+
+        } catch (err) {
+            wx.hideLoading();
+            console.error('Add record failed', err);
+        }
+    }
+});
@@ -0,0 +1,11 @@
+{
+    "navigationBarTitleText": "添加成长记录",
+    "navigationBarBackgroundColor": "#FFFFFF",
+    "navigationBarTextStyle": "black",
+    "backgroundColor": "#F4F6F0",
+    "usingComponents": {
+        "t-icon": "tdesign-miniprogram/icon/icon",
+        "t-image": "tdesign-miniprogram/image/image",
+        "t-button": "tdesign-miniprogram/button/button"
+    }
+}
@@ -0,0 +1,61 @@
+<view class="growth-record-page">
+    <view class="form-container">
+        <!-- Record Type -->
+        <view class="form-group">
+            <text class="form-label">记录类型</text>
+            <view class="chip-group">
+                <view class="chip {{recordType === 'growth' ? 'active' : ''}}" bindtap="setRecordType" data-type="growth">
+                    <t-icon name="thumb-up" size="32rpx" />
+                    <text>生长</text>
+                </view>
+                <view class="chip {{recordType === 'repot' ? 'active' : ''}}" bindtap="setRecordType" data-type="repot">
+                    <t-icon name="swap" size="32rpx" />
+                    <text>换盆</text>
+                </view>
+                <view class="chip {{recordType === 'pest' ? 'active' : ''}}" bindtap="setRecordType" data-type="pest">
+                    <t-icon name="error-circle" size="32rpx" />
+                    <text>病虫害</text>
+                </view>
+                <view class="chip {{recordType === 'other' ? 'active' : ''}}" bindtap="setRecordType" data-type="other">
+                    <t-icon name="file" size="32rpx" />
+                    <text>其他</text>
+                </view>
+            </view>
+        </view>
+
+        <!-- Content -->
+        <view class="form-group">
+            <text class="form-label">备注</text>
+            <textarea 
+                class="form-textarea" 
+                placeholder="记录这一刻的变化..." 
+                value="{{content}}" 
+                bindinput="onContentInput"
+                maxlength="500"
+                auto-height
+            />
+        </view>
+
+        <!-- Image Upload -->
+        <view class="form-group">
+            <text class="form-label">添加照片</text>
+            <view class="record-image-upload">
+                <view wx:if="{{image}}" class="uploaded-image-box">
+                    <t-image src="{{image}}" mode="aspectFill" width="200rpx" height="200rpx" shape="round" />
+                    <view class="remove-img-btn" bindtap="handleRemoveImage">
+                        <t-icon name="close" size="32rpx" color="#FFF" />
+                    </view>
+                </view>
+                <view wx:else class="upload-add-btn" bindtap="handleChooseImage">
+                    <t-icon name="add" size="64rpx" color="#999" />
+                </view>
+            </view>
+        </view>
+    </view>
+
+    <view class="footer-action">
+        <view class="submit-btn" bindtap="handleAddRecord">
+            <text>保存记录</text>
+        </view>
+    </view>
+</view>
@@ -0,0 +1,159 @@
+/* pages/plant-detail/growth-record/index.wxss */
+page {
+    background: #F4F6F0;
+}
+
+.growth-record-page {
+    padding: 32rpx;
+    padding-bottom: 160rpx;
+}
+
+.form-container {
+    background: white;
+    border-radius: 32rpx;
+    padding: 32rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
+}
+
+.form-group {
+    margin-bottom: 48rpx;
+}
+
+.form-group:last-child {
+    margin-bottom: 0;
+}
+
+.form-label {
+    display: block;
+    font-size: 30rpx;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 24rpx;
+}
+
+/* Chip Styles */
+.chip-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20rpx;
+}
+
+.chip {
+    padding: 20rpx 32rpx;
+    background: #F5F5F5;
+    border-radius: 40rpx;
+    font-size: 28rpx;
+    color: #666;
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+    border: 2rpx solid transparent;
+    transition: all 0.2s;
+}
+
+.chip.active {
+    background: #E8F5E9;
+    color: #558B2F;
+    border-color: #558B2F;
+    font-weight: 600;
+}
+
+.chip:active {
+    transform: scale(0.96);
+}
+
+/* Textarea */
+.form-textarea {
+    width: 100%;
+    min-height: 200rpx;
+    padding: 24rpx;
+    border: 2rpx solid #e0e0e0;
+    border-radius: 24rpx;
+    font-size: 30rpx;
+    box-sizing: border-box;
+    background: #FAFAFA;
+    line-height: 1.6;
+}
+
+.form-textarea:focus {
+    background: white;
+    border-color: #558B2F;
+    box-shadow: 0 0 0 6rpx rgba(85, 139, 47, 0.1);
+}
+
+/* Image Upload */
+.record-image-upload {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+}
+
+.upload-add-btn {
+    width: 200rpx;
+    height: 200rpx;
+    background: #FAFAFA;
+    border: 2rpx dashed #d9d9d9;
+    border-radius: 24rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.upload-add-btn:active {
+    background: #F0F0F0;
+    border-color: #558B2F;
+}
+
+.uploaded-image-box {
+    position: relative;
+    width: 200rpx;
+    height: 200rpx;
+}
+
+.remove-img-btn {
+    position: absolute;
+    top: -16rpx;
+    right: -16rpx;
+    width: 44rpx;
+    height: 44rpx;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    backdrop-filter: blur(4rpx);
+}
+
+/* Footer Action */
+.footer-action {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 32rpx;
+    background: white;
+    box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
+    z-index: 100;
+    padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
+}
+
+.submit-btn {
+    width: 100%;
+    height: 96rpx;
+    background: linear-gradient(135deg, #689F38, #558B2F);
+    border-radius: 48rpx;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32rpx;
+    font-weight: 600;
+    box-shadow: 0 8rpx 24rpx rgba(85, 139, 47, 0.3);
+}
+
+.submit-btn:active {
+    transform: scale(0.98);
+    filter: brightness(0.95);
+}
@@ -5,7 +5,7 @@ Page({
    data: {
        currentPlant: null,
        activeImageIndex: 0,
-        activeTab: 'care',
+        activeTab: 'info',
        careLogs: [],
        displayCareLogs: [],
        displayCareLimit: 5,
@@ -51,22 +51,46 @@ Page({
                return { ...cp, taskIcon: iconObj };
            });

+            // Calculate days planted and format date
+            let adoptionDate = '未知';
+            let daysPlanted = 0;
+            if (plant.plantTime) {
+                const start = new Date(plant.plantTime);
+                const now = new Date();
+                const diffTime = now - start;
+                if (diffTime > 0) {
+                    daysPlanted = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+                }
+                adoptionDate = plant.plantTime.split('T')[0];
+            }
+
            this.setData({
                currentPlant: {
                    ...plant,
+                    location: plant.placement || '',
+                    adoptionDate: adoptionDate,
+                    daysPlanted: daysPlanted,
                    careSchedule: carePlans
                },
                swiperImages: swiperImages,
                // Map logs and records directly from plant detail response
                careLogs: this.processLogs(plant.careRecords || []),
-                records: (plant.growthRecords || plant.recordList || []).map(item => ({
-                    id: item.id,
-                    date: item.createdAtStr ? item.createdAtStr.split(' ')[0] : '',
-                    type: item.recordType || 'growth',
-                    title: item.title,
-                    content: item.content,
-                    image: (item.imgList && item.imgList.length > 0) ? item.imgList[0].url : ''
-                }))
+                records: (plant.growthRecords || plant.recordList || []).map(item => {
+                    // Extract image URL safely
+                    let imageUrl = '';
+                    if (item.imgList && item.imgList.length > 0) {
+                        imageUrl = item.imgList[0].url;
+                    }
+
+                    return {
+                        id: item.id,
+                        date: item.createdAtStr ? item.createdAtStr.split(' ')[0] : '',
+                        type: item.tag || 'growth',
+                        title: item.name || '成长记录',
+                        content: item.content || item.desc || '',
+                        image: imageUrl
+                    };
+                })
            });

            this.updateDisplayLogs();
@@ -203,78 +227,21 @@ Page({
    },

    // Growth Record Logic
-    openGrowthModal() {
-        this.setData({
-            showGrowthModal: true,
-            newRecordContent: '',
-            newRecordType: 'growth',
-            newRecordImage: ''
-        });
-    },
-    onGrowthPopupVisibleChange(e) { this.setData({ showGrowthModal: e.detail.visible }); },
-    closeGrowthModal() { this.setData({ showGrowthModal: false }); },
-
-    setRecordType(e) {
-        const type = e.currentTarget.dataset.type;
-        if (e.detail.checked) {
-            this.setData({ newRecordType: type });
-        }
-    },
-    setRecordTypeByTap(e) {
-        const type = e.currentTarget.dataset.type;
-        this.setData({ newRecordType: type });
-    },
-    onRecordContentInput(e) { this.setData({ newRecordContent: e.detail.value }); },
-
-    handleChooseRecordImage() {
-        wx.chooseMedia({
-            count: 1,
-            mediaType: ['image'],
-            sourceType: ['album', 'camera'],
-            success: (res) => {
-                this.setData({
-                    newRecordImage: res.tempFiles[0].tempFilePath
-                });
-            }
-        });
-    },
-
-    handleRemoveRecordImage() {
-        this.setData({ newRecordImage: '' });
-    },
-
    handlePreviewRecordImage(e) {
        const src = e.currentTarget.dataset.src;
-        const fullPath = (src.indexOf('http') === 0 || src.indexOf('wxfile') === 0) ? src : `/assets/${src}`;
+        if (!src) return;

        wx.previewImage({
-            current: fullPath,
-            urls: [fullPath]
+            current: src,
+            urls: [src]
        });
    },

-    handleAddRecord() {
-        if (!this.data.newRecordContent.trim()) return;
-
-        const mapTitle = { growth: '生长记录', repot: '换盆记录', pest: '病虫害记录', other: '日常记录' };
-        const now = new Date();
-        const dateStr = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}`;
-
-        const record = {
-            id: Date.now().toString(),
-            date: dateStr,
-            type: this.data.newRecordType,
-            title: mapTitle[this.data.newRecordType],
-            content: this.data.newRecordContent,
-            image: this.data.newRecordImage
-        };
-
-        this.setData({
-            records: [record, ...this.data.records],
-            showGrowthModal: false
-        });
-        this.updateDisplayRecords();
-
-        wx.showToast({ title: '记录成功', icon: 'success' });
-    }
+    openGrowthModal() {
+        if (this.data.currentPlant && this.data.currentPlant.id) {
+            wx.navigateTo({
+                url: `/pages/plant-detail/growth-record/index?plantId=${this.data.currentPlant.id}`
+            });
+        }
+    },
 })
@@ -32,14 +32,69 @@
  <view class="detail-content">
    <!-- Custom Tabs -->
    <view class="pd-tabs">
+      <view class="pd-tab-btn {{activeTab === 'info' ? 'active' : ''}}" bindtap="switchTab" data-tab="info">
+        基础档案
+      </view>
      <view class="pd-tab-btn {{activeTab === 'care' ? 'active' : ''}}" bindtap="switchTab" data-tab="care">
        养护记录
      </view>
-      <view class="pd-tab-btn {{activeTab === 'archive' ? 'active' : ''}}" bindtap="switchTab" data-tab="archive">
-        植物档案
+      <view class="pd-tab-btn {{activeTab === 'growth' ? 'active' : ''}}" bindtap="switchTab" data-tab="growth">
+        成长档案
      </view>
    </view>

+    <!-- Info Tab Scroll View -->
+    <scroll-view 
+      scroll-y="{{!showGrowthModal}}" 
+      class="pd-content" 
+      enhanced="{{true}}" 
+      show-scrollbar="{{false}}"
+      hidden="{{activeTab !== 'info'}}"
+    >
+      <view class="archive-view fadeIn">
+        <view class="archive-identity-card">
+          <view class="aic-header">
+            <view class="aic-badge">🏆 元老级植物</view>
+            <view class="aic-location">
+              <t-icon name="location" size="28rpx" color="#388E3C" />
+              <text>{{currentPlant.location || '位置未定'}}</text>
+            </view>
+          </view>
+          <view class="aic-stats">
+            <view class="aic-stat-item">
+              <text class="label">入家时间</text>
+              <text class="value">{{currentPlant.adoptionDate || '未知'}}</text>
+            </view>
+            <view class="aic-stat-item">
+              <text class="label">入住天数</text>
+              <text class="value">{{currentPlant.daysPlanted}} 天</text>
+            </view>
+
+          </view>
+
+          <!-- New detail fields -->
+          <view class="aic-extra-info">
+            <view wx:if="{{currentPlant.potMaterial}}" class="aic-info-row">
+              <text class="label">花园材质：</text>
+              <text class="value">{{currentPlant.potMaterial}}</text>
+            </view>
+            <view wx:if="{{currentPlant.potSize}}" class="aic-info-row">
+              <text class="label">花园大小：</text>
+              <text class="value">{{currentPlant.potSize}}</text>
+            </view>
+            <view wx:if="{{currentPlant.sunlight}}" class="aic-info-row">
+              <text class="label">光照条件：</text>
+              <text class="value">{{currentPlant.sunlight}}</text>
+            </view>
+            <view wx:if="{{currentPlant.plantingMaterial}}" class="aic-info-row">
+              <text class="label">植料土壤：</text>
+              <text class="value">{{currentPlant.plantingMaterial}}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+
    <!-- Care Tab Scroll View -->
    <scroll-view 
      scroll-y="{{!showGrowthModal}}" 
@@ -91,58 +146,15 @@
      </view>
    </scroll-view>

-    <!-- Archive Tab Scroll View -->
+    <!-- Growth Tab Scroll View -->
    <scroll-view 
      scroll-y="{{!showGrowthModal}}" 
      class="pd-content" 
      enhanced="{{true}}" 
      show-scrollbar="{{false}}"
-      hidden="{{activeTab !== 'archive'}}"
+      hidden="{{activeTab !== 'growth'}}"
    >
      <view class="archive-view fadeIn">
-        <view class="archive-identity-card">
-          <view class="aic-header">
-            <view class="aic-badge">🏆 元老级植物</view>
-            <view class="aic-location">
-              <t-icon name="location" size="28rpx" color="#388E3C" />
-              <text>{{currentPlant.location || '位置未定'}}</text>
-            </view>
-          </view>
-          <view class="aic-stats">
-            <view class="aic-stat-item">
-              <text class="label">入家时间</text>
-              <text class="value">{{currentPlant.adoptionDate || '未知'}}</text>
-            </view>
-            <view class="aic-stat-item">
-              <text class="label">入住天数</text>
-              <text class="value">{{currentPlant.daysPlanted}} 天</text>
-            </view>
-            <view class="aic-stat-item">
-              <text class="label">养护次数</text>
-              <text class="value">{{careLogs.length || 0}} 次</text>
-            </view>
-          </view>
-
-          <!-- New detail fields -->
-          <view class="aic-extra-info">
-            <view wx:if="{{currentPlant.potMaterial}}" class="aic-info-row">
-              <text class="label">花园材质：</text>
-              <text class="value">{{currentPlant.potMaterial}}</text>
-            </view>
-            <view wx:if="{{currentPlant.potSize}}" class="aic-info-row">
-              <text class="label">花园大小：</text>
-              <text class="value">{{currentPlant.potSize}}</text>
-            </view>
-            <view wx:if="{{currentPlant.sunlight}}" class="aic-info-row">
-              <text class="label">光照条件：</text>
-              <text class="value">{{currentPlant.sunlight}}</text>
-            </view>
-            <view wx:if="{{currentPlant.plantingMaterial}}" class="aic-info-row">
-              <text class="label">植料土壤：</text>
-              <text class="value">{{currentPlant.plantingMaterial}}</text>
-            </view>
-          </view>
-        </view>

        <view class="section-header">
          <text class="h3">成长记录</text>
@@ -166,11 +178,11 @@
                  <text>{{item.title}}</text>
                </view>
                <text class="timeline-desc">{{item.content}}</text>
-                <t-image 
+                <image 
                  wx:if="{{item.image}}" 
                  src="{{item.image}}" 
-                  mode="widthFix" 
-                  width="100%" 
+                  mode="aspectFill" 
+                  style="width: 220rpx; height: 220rpx; border-radius: 16rpx; margin-top: 16rpx;"
                  class="timeline-img" 
                  bindtap="handlePreviewRecordImage" 
                  data-src="{{item.image}}" 
@@ -196,74 +208,5 @@
    </scroll-view>
  </view>
  
-  <!-- Growth Record Popup -->
-  <t-popup visible="{{showGrowthModal}}" bind:visible-change="onGrowthPopupVisibleChange" placement="center" prevent-scroll-through>
-    <view class="edit-modal">
-      <view class="modal-header" catchtouchmove="preventTouchMove">
-        <text class="modal-title">添加成长记录</text>
-        <view class="close-btn" bindtap="closeGrowthModal">
-          <t-icon name="close" size="40rpx" color="#666" />
-        </view>
-      </view>
-      
-      <view class="modal-body">
-        <!-- Record Type -->
-        <view class="form-group">
-          <text class="form-label">记录类型</text>
-          <view class="chip-group">
-            <view class="chip {{newRecordType === 'growth' ? 'active' : ''}}" bindtap="setRecordTypeByTap" data-type="growth">
-              <t-icon name="thumb-up" size="28rpx" />
-              <text>生长</text>
-            </view>
-            <view class="chip {{newRecordType === 'repot' ? 'active' : ''}}" bindtap="setRecordTypeByTap" data-type="repot">
-              <t-icon name="swap" size="28rpx" />
-              <text>换盆</text>
-            </view>
-            <view class="chip {{newRecordType === 'pest' ? 'active' : ''}}" bindtap="setRecordTypeByTap" data-type="pest">
-              <t-icon name="error-circle" size="28rpx" />
-              <text>病虫害</text>
-            </view>
-            <view class="chip {{newRecordType === 'other' ? 'active' : ''}}" bindtap="setRecordTypeByTap" data-type="other">
-              <t-icon name="file" size="28rpx" />
-              <text>其他</text>
-            </view>
-          </view>
-        </view>

-        <!-- Content -->
-        <view class="form-group">
-          <text class="form-label">备注</text>
-          <textarea 
-            class="form-textarea" 
-            placeholder="记录这一刻的变化..." 
-            value="{{newRecordContent}}" 
-            bindinput="onRecordContentInput"
-            auto-height
-          />
-        </view>
-
-        <!-- Image Upload -->
-        <view class="form-group">
-          <text class="form-label">添加照片</text>
-          <view class="record-image-upload">
-            <view wx:if="{{newRecordImage}}" class="uploaded-image-box">
-              <t-image src="{{newRecordImage}}" mode="aspectFill" width="160rpx" height="160rpx" shape="round" />
-              <view class="remove-img-btn" bindtap="handleRemoveRecordImage">
-                <t-icon name="close" size="24rpx" color="#FFF" />
-              </view>
-            </view>
-            <view wx:else class="upload-add-btn" bindtap="handleChooseRecordImage">
-              <t-icon name="add" size="48rpx" color="#999" />
-            </view>
-          </view>
-        </view>
-      </view>
-      
-      <view class="modal-footer" catchtouchmove="preventTouchMove">
-        <view class="submit-btn" bindtap="handleAddRecord">
-          <text>保存记录</text>
-        </view>
-      </view>
-    </view>
-  </t-popup>
 </view>
@@ -0,0 +1,105 @@
+
+import request from '../../../utils/request';
+
+Page({
+    data: {
+        userLevel: 0,
+        userLevelTag: '',
+        currentExp: 0,
+        maxExp: 1000,
+        maxExp: 1000,
+        nextLevelExp: 1000,
+        showLevelsPopup: false,
+        allLevels: [],
+
+        badges: [
+            { id: 1, name: '初级播种者', desc: '成功种植第一棵植物', iconName: 'flower', color: '#4CAF50', unlocked: true },
+            { id: 2, name: '勤劳园丁', desc: '总养护次数达到10次', iconName: 'tools', color: '#2196F3', unlocked: true },
+            { id: 3, name: '植物专家', desc: '成功识别50种植物', iconName: 'scan', color: '#9C27B0', unlocked: false, progress: '12/50' },
+            { id: 4, name: '全勤奖', desc: '连续30天打卡', iconName: 'calendar', color: '#FF9800', unlocked: false, progress: '5/30' },
+            { id: 5, name: '分享大师', desc: '发布10条动态', iconName: 'share', color: '#E91E63', unlocked: false, progress: '3/10' },
+            { id: 6, name: '收藏家', desc: '收藏20个植物百科', iconName: 'star', color: '#FFC107', unlocked: false, progress: '8/20' }
+        ]
+    },
+
+    onLoad() {
+        this.fetchData();
+    },
+
+    async fetchData() {
+        wx.showLoading({ title: '加载中...' });
+        try {
+            const [levelRes, profileRes] = await Promise.all([
+                request.get('/config/level/list'),
+                request.get('/profile/detail')
+            ]);
+            this.processData(levelRes, profileRes);
+        } catch (e) {
+            console.error('Fetch badges data failed', e);
+            wx.showToast({ title: '加载失败', icon: 'none' });
+        } finally {
+            wx.hideLoading();
+        }
+    },
+
+    processData(levelsData, profile) {
+        const levelList = levelsData && levelsData.list ? levelsData.list : [];
+        levelList.sort((a, b) => a.minSunlight - b.minSunlight); // Ensure sorted by threshold
+
+        const totalSunlight = profile.totalSunlight || 0;
+
+        // Find current level: highest level where minSunlight <= totalSunlight
+        let currentLevelConfig = null;
+        for (let i = levelList.length - 1; i >= 0; i--) {
+            if (totalSunlight >= levelList[i].minSunlight) {
+                currentLevelConfig = levelList[i];
+                break;
+            }
+        }
+
+        // Check if no level matched (e.g. 0 sunlight but level 1 starts at 0? Logic handles it if sorted)
+        if (!currentLevelConfig && levelList.length > 0) {
+            // Fallback to absolute lowest or specific logic
+            // Assuming level 1 starts at 0, it should be caught.
+            currentLevelConfig = levelList[0];
+        }
+
+        const currentLevelVal = currentLevelConfig ? currentLevelConfig.level : 0;
+
+        // Find next level
+        const nextLevelConfig = levelList.find(l => l.minSunlight > totalSunlight);
+
+        let maxExp = 0;
+        let nextPerk = '';
+
+        if (nextLevelConfig) {
+            maxExp = nextLevelConfig.minSunlight;
+            nextPerk = nextLevelConfig.perks;
+        } else {
+            // Max level
+            maxExp = totalSunlight > 0 ? totalSunlight : 100;
+            nextPerk = '已达到最高等级';
+        }
+
+        // Sanity
+        if (maxExp < totalSunlight) maxExp = totalSunlight;
+
+        const tag = currentLevelConfig ? `Lv.${currentLevelVal} ${currentLevelConfig.title}` : 'Lv.0 园艺新手';
+
+        this.setData({
+            userLevel: currentLevelVal,
+            userLevelTag: tag,
+            currentExp: totalSunlight,
+            maxExp: maxExp,
+            nextLevelExp: Math.max(0, maxExp - totalSunlight),
+            nextPerk: nextPerk,
+            allLevels: levelList // Save for popup
+        });
+    },
+
+    showLevelList() {
+        wx.navigateTo({
+            url: `/pages/profile/badges/level-detail/index?sunlight=${this.data.currentExp}`
+        });
+    },
+});
@@ -0,0 +1,8 @@
+{
+    "navigationBarTitleText": "成就徽章",
+    "navigationBarBackgroundColor": "#F4F6F0",
+    "navigationBarTextStyle": "black",
+    "usingComponents": {
+        "t-icon": "tdesign-miniprogram/icon/icon"
+    }
+}
@@ -0,0 +1,45 @@
+<view class="badges-page">
+    <scroll-view scroll-y class="badges-scroll" enhanced show-scrollbar="{{false}}">
+       <!-- Level Card -->
+       <view class="level-card-large" bindtap="showLevelList">
+           <view class="level-card-bg"></view>
+           <view class="level-header">
+               <view class="level-info-large">
+                   <text class="level-label">当前等级</text>
+                   <text class="level-value">{{userLevelTag}}</text>
+               </view>
+               <t-icon name="trophy" size="80rpx" color="#FFD700" />
+           </view>
+           <view class="level-progress-section">
+               <view class="progress-text">
+                   <text>阳光值</text>
+                   <text>{{currentExp}} / {{maxExp}}</text>
+               </view>
+               <view class="level-progress-bar-bg">
+                   <view class="level-progress-bar-fill" style="width: {{currentExp * 100 / maxExp}}%;"></view>
+               </view>
+               <text class="next-level-tip">距离下一级还需要 {{nextLevelExp}} 阳光</text>
+               <text class="next-level-perk" wx:if="{{nextPerk}}">下一级奖励: {{nextPerk}}</text>
+           </view>
+           <view class="click-hint">点击查看等级详情 ></view>
+       </view>
+
+       <view class="section-title-badges">所有徽章 ({{badges.length}})</view>
+
+       <view class="badges-grid">
+           <view wx:for="{{badges}}" wx:key="id" class="badge-item {{item.unlocked ? 'unlocked' : 'locked'}}">
+               <view class="badge-icon-circle" style="background: {{item.unlocked ? item.color + '20' : '#F5F5F5'}}">
+                   <t-icon wx:if="{{item.unlocked}}" name="{{item.iconName}}" size="48rpx" color="{{item.color}}" />
+                   <t-icon wx:else name="lock-on" size="40rpx" color="#BDBDBD" />
+               </view>
+               <text class="badge-name">{{item.name}}</text>
+               <text class="badge-desc">{{item.desc}}</text>
+               <text wx:if="{{item.progress}}" class="badge-progress">{{item.progress}}</text>
+           </view>
+       </view>
+       
+       <view style="height: 60rpx;"></view>
+    </scroll-view>
+
+
+</view>
@@ -0,0 +1,273 @@
+page {
+    background: #F4F6F0;
+}
+.badges-page {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+.badges-scroll {
+    flex: 1;
+    padding: 32rpx;
+    box-sizing: border-box;
+}
+
+/* Level Card */
+.level-card-large {
+    background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
+    border-radius: 40rpx;
+    padding: 40rpx;
+    color: white;
+    margin-bottom: 48rpx;
+    box-shadow: 0 20rpx 40rpx rgba(44, 62, 80, 0.2);
+    position: relative;
+    overflow: hidden;
+}
+
+.level-card-bg {
+    position: absolute;
+    top: -100rpx;
+    right: -100rpx;
+    width: 300rpx;
+    height: 300rpx;
+    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+    border-radius: 50%;
+}
+
+.level-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 40rpx;
+    position: relative;
+    z-index: 2;
+}
+
+.level-info-large {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+}
+
+.level-label {
+    font-size: 24rpx;
+    opacity: 0.8;
+    letter-spacing: 2rpx;
+    text-transform: uppercase;
+}
+
+.level-value {
+    font-size: 48rpx;
+    font-weight: 800;
+}
+
+.level-progress-section {
+    position: relative;
+    z-index: 2;
+}
+
+.progress-text {
+    display: flex;
+    justify-content: space-between;
+    font-size: 26rpx;
+    margin-bottom: 16rpx;
+    font-weight: 600;
+    opacity: 0.9;
+}
+
+.level-progress-bar-bg {
+    height: 16rpx;
+    background: rgba(0,0,0,0.2);
+    border-radius: 8rpx;
+    margin-bottom: 24rpx;
+    border: 2rpx solid rgba(255,255,255,0.1);
+}
+
+.level-progress-bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #FFD700, #FDB931);
+    border-radius: 8rpx;
+    box-shadow: 0 0 12rpx rgba(255, 215, 0, 0.4);
+}
+
+.next-level-tip {
+    font-size: 24rpx;
+    color: rgba(255,255,255,0.7);
+    display: block;
+    text-align: right;
+}
+
+/* Click Hint */
+.click-hint {
+    text-align: right;
+    font-size: 22rpx;
+    color: rgba(255,255,255,0.7);
+    margin-top: 24rpx;
+    font-weight: 500;
+}
+
+.next-level-perk {
+    font-size: 22rpx;
+    color: #FFD700;
+    margin-top: 8rpx;
+    display: block;
+    text-align: right;
+    font-weight: 500;
+}
+
+/* Popup Styles */
+.level-popup-content {
+  background: white;
+  border-radius: 24rpx 24rpx 0 0;
+  padding: 32rpx 40rpx;
+  max-height: 80vh;
+  box-sizing: border-box;
+}
+
+.popup-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 34rpx;
+  font-weight: 700;
+  margin-bottom: 32rpx;
+  color: #333;
+}
+
+.level-list-scroll {
+  max-height: 60vh;
+  box-sizing: border-box;
+}
+
+.level-list-item {
+  position: relative;
+  background: #f9f9f9;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  margin-bottom: 20rpx;
+  border: 2rpx solid transparent;
+}
+
+.level-list-item.achieved {
+  background: #F1F8E9;
+  border-color: #A5D6A7;
+}
+
+.level-item-top {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12rpx;
+}
+
+.level-tag-badge {
+    background: #CFD8DC;
+    color: #546E7A;
+    font-size: 20rpx;
+    padding: 4rpx 10rpx;
+    border-radius: 8rpx;
+    margin-right: 16rpx;
+    font-weight: 700;
+}
+.achieved .level-tag-badge {
+    background: #4CAF50;
+    color: white;
+}
+
+.level-item-title {
+    font-size: 28rpx;
+    font-weight: 700;
+    color: #333;
+}
+
+.level-spacer {
+    flex: 1;
+}
+
+.level-item-req {
+    font-size: 24rpx;
+    color: #999;
+    font-weight: 600;
+}
+.achieved .level-item-req {
+    color: #4CAF50;
+}
+
+.level-item-desc {
+    font-size: 24rpx;
+    color: #666;
+    line-height: 1.4;
+    padding-top: 12rpx;
+    border-top: 2rpx dashed #eee;
+}
+.achieved .level-item-desc {
+    border-top-color: rgba(76, 175, 80, 0.2);
+    color: #388E3C;
+}
+
+.level-achieve-icon {
+    position: absolute;
+    right: 24rpx;
+    top: 24rpx;
+}
+
+.section-title-badges {
+    font-size: 32rpx;
+    font-weight: 700;
+    color: #1F2937;
+    margin-bottom: 32rpx;
+    margin-left: 12rpx;
+}
+
+.badges-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20rpx;
+}
+
+.badge-item {
+    background: #fff;
+    border-radius: 24rpx;
+    padding: 32rpx 16rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.02);
+}
+
+.badge-item.locked {
+    background: #F8F9FA;
+    border: 2rpx dashed #E5E7EB;
+    box-shadow: none;
+}
+
+.badge-icon-circle {
+    width: 88rpx;
+    height: 88rpx;
+    border-radius: 30rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20rpx;
+}
+
+.badge-name {
+    font-size: 26rpx;
+    font-weight: 700;
+    color: #374151;
+    margin-bottom: 6rpx;
+}
+
+.badge-desc {
+    font-size: 20rpx;
+    color: #9CA3AF;
+}
+
+.badge-progress {
+    margin-top: 12rpx;
+    font-size: 20rpx;
+    background: #F3F4F6;
+    padding: 4rpx 12rpx;
+    border-radius: 12rpx;
+    color: #6B7280;
+}
@@ -0,0 +1,79 @@
+import request from '../../../../utils/request';
+
+Page({
+    data: {
+        levels: [],
+        currentSunlight: 0,
+        currentLevel: 0
+    },
+
+    onLoad(options) {
+        let sunlight;
+        if (options.sunlight !== undefined) {
+            sunlight = parseInt(options.sunlight, 10);
+            if (!isNaN(sunlight)) {
+                this.setData({ currentSunlight: sunlight });
+            } else {
+                sunlight = undefined;
+            }
+        }
+
+        this.fetchData(sunlight);
+    },
+
+    async fetchData(passedSunlight) {
+        wx.showLoading({ title: '加载中...' });
+        try {
+            // Fetch levels
+            const levelRes = await request.get('/config/level/list');
+            console.log('Level Detail - API Response:', levelRes);
+
+            let list = [];
+            if (levelRes) {
+                if (Array.isArray(levelRes)) {
+                    list = levelRes;
+                } else if (Array.isArray(levelRes.list)) {
+                    list = levelRes.list;
+                } else if (levelRes.data && Array.isArray(levelRes.data.list)) {
+                    list = levelRes.data.list;
+                } else if (levelRes.data && Array.isArray(levelRes.data)) {
+                    list = levelRes.data;
+                }
+            }
+
+            console.log('Level Detail - Parsed List:', list);
+            list.sort((a, b) => a.minSunlight - b.minSunlight);
+
+            // Fetch profile if sunlight not passed
+            let currentSunlight = passedSunlight;
+            if (currentSunlight === undefined) {
+                const profileRes = await request.get('/profile/detail');
+                console.log('Level Detail - Profile:', profileRes);
+                currentSunlight = profileRes.totalSunlight || 0;
+                this.setData({ currentSunlight });
+            }
+
+            // Calculate current level
+            let currentLevel = 0;
+            // Iterate finding the highest level where minSunlight <= currentSunlight
+            for (let i = list.length - 1; i >= 0; i--) {
+                if (currentSunlight >= list[i].minSunlight) {
+                    currentLevel = list[i].level;
+                    break;
+                }
+            }
+
+            console.log('Level Detail - Calculated Level:', currentLevel);
+
+            this.setData({
+                levels: list,
+                currentLevel
+            });
+        } catch (e) {
+            console.error('Fetch level detail failed', e);
+            wx.showToast({ title: '数据加载失败', icon: 'none' });
+        } finally {
+            wx.hideLoading();
+        }
+    }
+});
@@ -0,0 +1,6 @@
+{
+    "navigationBarTitleText": "等级说明",
+    "usingComponents": {
+        "t-icon": "tdesign-miniprogram/icon/icon"
+    }
+}
@@ -0,0 +1,32 @@
+<view class="level-detail-page">
+   <view class="header-card">
+       <view class="header-title">累计阳光值</view>
+       <view class="header-value">{{currentSunlight}}</view>
+   </view>
+
+   <scroll-view scroll-y class="timeline-scroll">
+       <view class="timeline">
+           <view wx:for="{{levels}}" wx:key="level" class="timeline-item {{item.level <= currentLevel ? 'active' : ''}}">
+               <view class="timeline-left">
+                   <view class="dot-line-top"></view>
+                   <view class="status-dot">
+                      <t-icon wx:if="{{item.level <= currentLevel}}" name="check" size="24rpx" color="#fff" />
+                   </view>
+                   <view class="dot-line-bottom"></view>
+               </view>
+               <view class="timeline-content">
+                   <view class="level-card {{item.level === currentLevel ? 'current' : ''}}">
+                       <view class="card-header">
+                           <text class="card-lv">Lv.{{item.level}}</text>
+                           <text class="card-title">{{item.title}}</text>
+                           <view class="flex-spacer"></view>
+                           <text class="card-sun">{{item.minSunlight}} 阳光</text>
+                       </view>
+                       <view class="card-perks" wx:if="{{item.perks}}">{{item.perks}}</view>
+                   </view>
+               </view>
+           </view>
+       </view>
+       <view style="height: 60rpx;"></view>
+   </scroll-view>
+</view>
@@ -0,0 +1,179 @@
+page {
+    background: #F4F6F0;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.level-detail-page {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.header-card {
+    background: linear-gradient(135deg, #2c3e50, #4ca1af);
+    padding: 60rpx 40rpx;
+    color: white;
+    text-align: center;
+    border-radius: 0 0 40rpx 40rpx;
+    box-shadow: 0 10rpx 30rpx rgba(44, 62, 80, 0.2);
+    margin-bottom: 40rpx;
+    flex-shrink: 0;
+}
+
+.header-title {
+    font-size: 28rpx;
+    opacity: 0.8;
+    margin-bottom: 12rpx;
+}
+
+.header-value {
+    font-size: 64rpx;
+    font-weight: 800;
+}
+
+.timeline-scroll {
+    flex: 1;
+    overflow-y: auto;
+}
+
+.timeline {
+    padding: 0 40rpx;
+}
+
+.timeline-item {
+    display: flex;
+    position: relative;
+    min-height: 140rpx;
+}
+
+.timeline-left {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 60rpx;
+    margin-right: 20rpx;
+}
+
+.dot-line-top, .dot-line-bottom {
+    width: 4rpx;
+    background: #E0E0E0;
+    flex: 1;
+}
+
+.timeline-item:first-child .dot-line-top {
+    visibility: hidden;
+}
+
+.timeline-item:last-child .dot-line-bottom {
+    visibility: hidden;
+}
+
+.status-dot {
+    width: 40rpx;
+    height: 40rpx;
+    border-radius: 50%;
+    background: #E0E0E0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 8rpx 0;
+    z-index: 1;
+    flex-shrink: 0;
+}
+
+.timeline-item.active .status-dot {
+    background: #4CAF50;
+    box-shadow: 0 0 0 6rpx rgba(76, 175, 80, 0.2);
+}
+
+/* Logic for lines:
+   The top line of THIS item should be green if THIS item is active.
+   Wait, if item 2 is active, item 1 is also active.
+   Line connecting 1 and 2 is bottom of 1 and top of 2.
+   If 2 is active, top of 2 is green.
+   If 1 is active, bottom of 1 is green?
+   Easier: make lines background #E0E0E0.
+   Use a pseudo element or simply rely on active class.
+*/
+
+.timeline-item.active .dot-line-top {
+    background: #4CAF50;
+}
+
+/* If next item is active, make this item's bottom line green */
+/* CSS cannot select based on next sibling easily without :has */
+/* So just color top line of active item green. Bottom line stays gray? No. */
+/* Just color all lines of active items green, EXCEPT the line connecting active to inactive. */
+/* For simplicity, let's keep lines gray or improve logic. */
+/* If I color .timeline-item.active .dot-line-bottom green, then if next is NOT active, it looks weird. */
+/* Correct way: .timeline-item.active .dot-line-top is Green. */
+
+.timeline-content {
+    flex: 1;
+    padding-bottom: 40rpx;
+}
+
+.level-card {
+    background: white;
+    border-radius: 20rpx;
+    padding: 24rpx;
+    border: 2rpx solid transparent;
+    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.02);
+}
+
+.level-card.current {
+    border-color: #4CAF50;
+    background: #F1F8E9;
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16rpx;
+}
+
+.card-lv {
+    background: #eceff1;
+    color: #546e7a;
+    font-size: 20rpx;
+    padding: 4rpx 12rpx;
+    border-radius: 8rpx;
+    font-weight: 700;
+    margin-right: 16rpx;
+}
+
+.timeline-item.active .card-lv {
+    background: #4CAF50;
+    color: white;
+}
+
+.card-title {
+    font-size: 30rpx;
+    font-weight: 700;
+    color: #333;
+}
+
+.flex-spacer {
+    flex: 1;
+}
+
+.card-sun {
+    font-size: 24rpx;
+    color: #999;
+    font-weight: 600;
+}
+
+.card-perks {
+    font-size: 26rpx;
+    color: #666;
+    line-height: 1.4;
+    padding-top: 16rpx;
+    border-top: 2rpx dashed #eee;
+}
+
+.level-card.current .card-perks {
+    border-top-color: rgba(76, 175, 80, 0.2);
+    color: #388E3C;
+}
@@ -40,58 +40,52 @@ Page({
        if (typeof this.getTabBar === 'function' && this.getTabBar()) {
            this.getTabBar().setData({ selected: 4 });
        }
+        // Always fetch fresh profile data
+        this.loadUserInfo();
    },

    // ======== User Info ========
    loadUserInfo() {
-        // Try to get from globalData or storage
-        const userInfo = app.globalData.userInfo || wx.getStorageSync('userInfo');
-        if (userInfo && userInfo.name) {
-            this.setData({
-                userName: userInfo.name || '植物爱好者',
-                userAvatar: userInfo.avatarUrl || userInfo.avatar || ''
-            });
-            return; // Use cached data, no API call
-        }
+        request.get('/profile/detail').then(res => {
+            if (!res) return;
+
+            // Map stats and level info
+            const avatarUrl = res.avatar && res.avatar.url ? res.avatar.url : '';
+            const levelInfo = res.level || {};
+            const levelTag = levelInfo.level ? `Lv.${levelInfo.level} ${levelInfo.title || ''}` : '';

-        // Only fetch from backend if no cached info
-        request.get('/user/info').then(user => {
-            if (!user) return;
-            const avatarUrl = user.avatar ? user.avatar.url : '';
            this.setData({
-                userName: user.name || '植物爱好者',
-                userAvatar: avatarUrl
+                userName: res.nickname || '植物爱好者',
+                userAvatar: avatarUrl,
+
+                // Stats
+                plantCount: res.plantCount || 0,
+                taskDoneCount: res.careCount || 0,
+                postCount: res.postCount || 0,
+
+                // Level (if available)
+                userLevel: levelInfo.level || 0,
+                userLevelTag: levelTag,
+
+                // EXP / Sunlight
+                userExp: res.currentSunlight || 0
            });
+
+            // Update global cache
            const info = {
-                id: user.id,
-                name: user.name,
-                avatarUrl: avatarUrl,
-                account: user.account,
-                phone: user.phone,
-                avatarId: user.avatarId
+                ...res,
+                avatarId: res.avatarId || (res.avatar ? res.avatar.id : '')
            };
            app.globalData.userInfo = info;
            wx.setStorageSync('userInfo', info);
-        }).catch(() => { });
+
+        }).catch(err => {
+            console.error('Load profile failed', err);
+        });
    },

    // ======== Stats ========
-    loadStats() {
-        // Fetch plant count
-        request.post('/plant/page', { current: 1, pageSize: 1 }).then(res => {
-            this.setData({ plantCount: res.total || 0 });
-        }).catch(() => { });

-        // Fetch post count - user's own posts
-        request.post('/post/page', { current: 1, pageSize: 1, onlyMine: true }).then(res => {
-            this.setData({ postCount: res.total || 0 });
-        }).catch(() => { });
-
-        // Fetch completed tasks count
-        request.get('/plant/taskCount').then(res => {
-            this.setData({ taskDoneCount: res || 0 });
-        }).catch(() => { });
-    },

    // ======== Navigation ========
    setView(e) {
@@ -222,6 +216,10 @@ Page({
        wx.navigateTo({ url: '/pages/profile/identify-history/index' });
    },

+    goToBadges() {
+        wx.navigateTo({ url: '/pages/profile/badges/index' });
+    },
+
    goToNotificationSettings() {
        // Open WeChat notification settings
        wx.openSetting({
@@ -284,10 +282,14 @@ Page({
    },

    async saveProfile() {
-        const { tempAvatar, tempNickname } = this.data;
+        const { tempAvatar, tempNickname, userName, userAvatar } = this.data;

-        if (!tempAvatar && !tempNickname) {
-            wx.showToast({ title: '请选择头像或输入昵称', icon: 'none' });
+        // Check if anything changed
+        const isNameChanged = tempNickname && tempNickname !== userName;
+        const isAvatarChanged = tempAvatar && tempAvatar !== userAvatar;
+
+        if (!isNameChanged && !isAvatarChanged) {
+            this.setData({ showProfileEditor: false });
            return;
        }

@@ -297,36 +299,51 @@ Page({
            const updatePayload = {};

            // 1. Upload avatar if changed
-            if (tempAvatar) {
-                const data = await request.upload(tempAvatar);
-                const fileData = data?.file || {};
-                if (fileData.id) {
-                    updatePayload.avatar_id = fileData.id;
-                    // Update local display
-                    this.setData({ userAvatar: fileData.url || tempAvatar });
+            if (isAvatarChanged) {
+                const uploadRes = await request.upload(tempAvatar);
+                // Correctly extract ID from file object based on known API response
+                let fileId = '';
+                if (uploadRes && uploadRes.file && uploadRes.file.id) {
+                    fileId = uploadRes.file.id;
+                } else if (uploadRes && uploadRes.id) {
+                    fileId = uploadRes.id;
+                }
+
+                if (fileId) {
+                    updatePayload.avatarId = fileId;
                }
            }

-            // 2. Set name if provided
-            if (tempNickname) {
-                updatePayload.name = tempNickname;
-                this.setData({ userName: tempNickname });
+            // 2. Set nickname if changed
+            if (isNameChanged) {
+                updatePayload.nickname = tempNickname;
            }

            // 3. Call update API
            if (Object.keys(updatePayload).length > 0) {
-                await request.post('/user/update', updatePayload);
+                await request.post('/profile/update', updatePayload);
            }

            wx.hideLoading();
-            this.setData({ showProfileEditor: false });
+
+            // 4. Update local state
+            this.setData({
+                userName: tempNickname || userName,
+                userAvatar: tempAvatar || userAvatar, // Use tempAvatar for immediate display
+                showProfileEditor: false
+            });
+
            wx.showToast({ title: '资料已更新', icon: 'success' });

-            // Update globalData
+            // 5. Update globalData
            const userInfo = app.globalData.userInfo || {};
-            if (updatePayload.name) userInfo.name = updatePayload.name;
-            if (updatePayload.avatar_id) userInfo.avatarId = updatePayload.avatar_id;
+            if (updatePayload.nickname) userInfo.name = updatePayload.nickname;
+            if (updatePayload.avatarId) userInfo.avatarId = updatePayload.avatarId;
+            // Also update URL if we have it locally? 
+            // Better to re-fetch profile to get canonical URL, but optimistic update is fine.
+            userInfo.avatar = tempAvatar;
            app.globalData.userInfo = userInfo;
+
        } catch (err) {
            wx.hideLoading();
            console.error('Save profile failed', err);
@@ -61,51 +61,7 @@
    </scroll-view>
  </view>

-  <!-- ======== BADGES VIEW ======== -->
-  <view wx:elif="{{view === 'badges'}}" class="sub-view info-view-anim">
-    <view class="sub-nav" bindtap="goBack">
-      <t-icon name="chevron-left" size="40rpx" />
-      <text class="sub-nav-title">成就徽章</text>
-    </view>

-    <scroll-view scroll-y class="sub-scroll">
-       <!-- Level Card -->
-       <view class="level-card-large">
-           <view class="level-card-bg"></view>
-           <view class="level-header">
-               <view class="level-info-large">
-                   <text class="level-label">当前等级</text>
-                   <text class="level-value">Lv.4 资深植人</text>
-               </view>
-               <t-icon name="trophy" size="80rpx" color="#FFD700" />
-           </view>
-           <view class="level-progress-section">
-               <view class="progress-text">
-                   <text>经验值</text>
-                   <text>350 / 500</text>
-               </view>
-               <view class="level-progress-bar-bg">
-                   <view class="level-progress-bar-fill" style="width: 70%;"></view>
-               </view>
-               <text class="next-level-tip">距离 Lv.5 园艺大师 还需 150 经验</text>
-           </view>
-       </view>
-
-       <view class="section-title-badges">所有徽章 (3/6)</view>
-
-       <view class="badges-grid">
-           <view wx:for="{{badges}}" wx:key="id" class="badge-item {{item.unlocked ? 'unlocked' : 'locked'}}">
-               <view class="badge-icon-circle" style="background: {{item.unlocked ? item.color + '20' : '#F5F5F5'}}">
-                   <t-icon wx:if="{{item.unlocked}}" name="{{item.iconName}}" size="48rpx" color="{{item.color}}" />
-                   <t-icon wx:else name="lock-on" size="40rpx" color="#BDBDBD" />
-               </view>
-               <text class="badge-name">{{item.name}}</text>
-               <text class="badge-desc">{{item.desc}}</text>
-               <text wx:if="{{item.progress}}" class="badge-progress">{{item.progress}}</text>
-           </view>
-       </view>
-    </scroll-view>
-  </view>

  <!-- ======== ABOUT VIEW ======== -->
  <view wx:elif="{{view === 'about'}}" class="sub-view info-view-anim">
@@ -143,7 +99,7 @@
          </view>
          <view class="user-text" bindtap="openProfileEditor">
             <view class="user-name">{{userName}}</view>
-             <view class="level-badge">Lv.4 资深植人</view>
+             <view class="level-badge">{{userLevelTag || 'Lv.0 园艺新手'}}</view>
          </view>
       </view>
       <view class="settings-btn" bindtap="goToNotificationSettings">
@@ -206,7 +162,7 @@
               <t-icon name="chevron-right" size="36rpx" color="#ccc" />
           </view>

-           <view class="menu-item" bindtap="setView" data-view="badges">
+           <view class="menu-item" bindtap="goToBadges">
               <view class="menu-left">
                   <view class="menu-icon-bg" style="background: #F3E5F5">
                       <t-icon name="award" size="36rpx" color="#9C27B0" />
@@ -214,7 +170,7 @@
                   <text class="menu-text">成就徽章</text>
               </view>
               <view class="menu-right-info">
-                   <text class="menu-badge-text">已获 3 个</text>
+                   <!-- <text class="menu-badge-text">已获 3 个</text> -->
                   <t-icon name="chevron-right" size="36rpx" color="#ccc" />
               </view>
           </view>
@@ -246,7 +202,7 @@
        </view>
      </view>

-      <view class="edit-row" bindtap="onChooseAvatar">
+      <button class="edit-row avatar-btn" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
        <text class="edit-row-label">头像</text>
        <view class="edit-row-right">
          <t-avatar
@@ -257,7 +213,7 @@
          <t-avatar wx:else icon="user" size="96rpx" />
          <t-icon name="chevron-right" size="32rpx" color="#C5C5C5" />
        </view>
-      </view>
+      </button>

      <view class="edit-row">
        <text class="edit-row-label">昵称</text>
@@ -621,3 +621,24 @@
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.02);
    margin-bottom: 40rpx;
 }
+
+/* Avatar Button Reset */
+button.edit-row.avatar-btn {
+  background: transparent;
+  padding-left: 0;
+  padding-right: 0;
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  line-height: inherit;
+  font-size: inherit;
+  border-radius: 0;
+  text-align: left;
+}
+
+button.edit-row.avatar-btn::after {
+  border: none;
+  display: none;
+}
@@ -172,36 +172,48 @@ Page({
        const taskId = this.data.completingTask.id;
        const remark = this.data.remark || '';

-        wx.showLoading({ title: '提交中...' });
+        // Optimistic Update immediately for better feel? 
+        // Or wait for server? Wait is safer.
+        wx.showLoading({ title: '提交中...', mask: true });

        request.post('/plant/completeTask', {
            taskId: taskId,
            remark: remark
        }).then(() => {
            wx.hideLoading();
-            wx.showToast({ title: '已完成', icon: 'success' });

-            // Optimistic UI Update
+            // Optimistic UI Update Logic
            const groups = this.data.groupedTasks;
            let updated = false;
+            // Need to deep clone possibly, but here we modify and set back
            for (let g of groups) {
-                const t = g.tasks.find(x => x.id === taskId);
-                if (t) {
-                    t.isCompleted = true;
-                    t.isOverdue = false;
-                    // Do NOT sort. Just update status.
-                    updated = true;
-                    break;
+                // g is an object. groupedTasks is array of objects.
+                if (g.tasks) {
+                    const t = g.tasks.find(x => x && x.id === taskId);
+                    if (t) {
+                        t.isCompleted = true;
+                        t.isOverdue = false;
+                        updated = true;
+                        break;
+                    }
                }
            }

-            if (updated) {
-                this.setData({ groupedTasks: groups, tasks: groups, completingTask: null, remark: '' });
-            } else {
-                this.setData({ completingTask: null, remark: '' });
-            }
+            // Trigger Animation and Close Modal
+            this.setData({
+                completingTask: null,
+                remark: '',
+                groupedTasks: groups, // Update UI
+                tasks: groups,
+                showSunshine: true
+            });

-            // Sync with backend
+            // Hide Animation after duration
+            setTimeout(() => {
+                this.setData({ showSunshine: false });
+            }, 3000);
+
+            // Sync with backend silently
            this.fetchTodayTasks();

        }).catch(err => {
@@ -114,6 +114,10 @@
            value="{{remark}}" 
            bindinput="onRemarkInput"
            fixed="{{true}}"
+            adjust-position="{{false}}"
+            cursor-spacing="120"
+            show-confirm-bar="{{false}}"
+            disable-default-padding="{{true}}"
          />
        </view>

@@ -126,4 +130,13 @@
      </view>
    </view>
  </t-popup>
+
+  <!-- Sunshine Animation Layer -->
+  <view class="sunshine-layer" wx:if="{{showSunshine}}">
+    <view class="sunshine-pkg">
+      <view class="sun-halo"></view>
+      <text class="sun-core-emoji">☀️</text>
+      <text class="sun-add-text">+50 能量</text>
+    </view>
+  </view>
 </view>
@@ -253,67 +253,79 @@

 .tasks-container {
  flex: 1;
-  background: white;
-  border-top-left-radius: 60rpx;
-  border-top-right-radius: 60rpx;
-  padding: 48rpx 40rpx 0;
+  /* Removed background: white to avoid "too white" look */
+  padding: 24rpx 32rpx 0;
  display: flex;
  flex-direction: column;
  overflow: hidden; 
-  box-shadow: 0 -8rpx 32rpx rgba(0,0,0,0.03);
-  min-height: 0; /* Critical for flex scrolling */
+  min-height: 0; 
 }

 .section-title {
  font-size: 36rpx;
  font-weight: 800;
  color: #263238;
-  margin-bottom: 32rpx;
-  padding-left: 8rpx;
+  margin-bottom: 24rpx;
+  padding-left: 12rpx;
  flex-shrink: 0;
 }

 .task-list {
  flex: 1;
-  height: 0; /* Force flex container to define height */
+  height: 0; 
 }

 .plant-task-card {
-  background: linear-gradient(160deg, #FFFFFF 0%, #F5F9F6 100%);
+  background: #FFFFFF;
  border-radius: 32rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
-  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.04);
-  border: 1rpx solid rgba(0,0,0,0.02);
+  /* Enhanced shadow for depth */
+  box-shadow: 0 12rpx 32rpx rgba(100, 110, 100, 0.08);
+  border: none;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
 }

-/* Decorator for card */
+/* Decorator for card - subtle green accent */
+.plant-task-card::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 8rpx;
+  height: 100%;
+  background: #66BB6A;
+  opacity: 0.8;
+}
+
 .plant-task-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
-  width: 120rpx;
-  height: 120rpx;
+  width: 160rpx;
+  height: 160rpx;
  background: radial-gradient(circle at top right, #E8F5E9 0%, transparent 70%);
-  opacity: 0.6;
+  opacity: 0.8;
 }

 .plant-task-card.has-overdue {
  border: 2rpx solid rgba(239, 83, 80, 0.2);
-  background: linear-gradient(160deg, #FFEBEE 0%, #FFF 100%);
+  background: #FFF;
+}
+.plant-task-card.has-overdue::after {
+  background: #EF5350;
 }

 .card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
-  margin-bottom: 32rpx;
-  padding-bottom: 24rpx;
-  border-bottom: 2rpx dashed rgba(0, 0, 0, 0.05); /* Dashed line for ticket feel */
+  margin-bottom: 28rpx;
+  padding-bottom: 0;
+  border-bottom: none; 
 }

 .plant-info-brief {
@@ -325,11 +337,10 @@
 .plant-thumb-small {
  width: 88rpx;
  height: 88rpx;
-  border-radius: 24rpx;
+  border-radius: 20rpx;
  overflow: hidden;
  background: #f0f0f0;
  box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.05);
-  border: 2rpx solid #FFF;
 }

 .plant-thumb-small image {
@@ -352,7 +363,7 @@
 .plant-name-title {
  font-size: 32rpx;
  font-weight: 800;
-  color: #1B5E20; /* Dark Green theme */
+  color: #1B5E20; 
  letter-spacing: 1rpx;
 }

@@ -368,18 +379,20 @@
 .plant-tasks-list {
  display: flex;
  flex-direction: column;
-  gap: 28rpx;
+  gap: 24rpx;
 }

 .mini-task-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
-  background: rgba(255,255,255,0.6);
-  padding: 16rpx;
-  border-radius: 20rpx;
+  /* Distinct background for task row */
+  background: #F8F9FA;
+  padding: 20rpx;
+  border-radius: 24rpx;
  width: 100%;
-  box-sizing: border-box; /* Important for padding */
+  box-sizing: border-box; 
+  border: 1rpx solid #F1F3F4;
 }

 .mini-task-left {
@@ -768,3 +781,86 @@
  margin-top: 20rpx;
  box-shadow: 0 8rpx 16rpx rgba(85, 139, 47, 0.2);
 }
+
+/* Sunshine Animation Layer */
+.sunshine-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.sunshine-pkg {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  animation: flyAndCollect 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.sun-halo {
+  position: absolute;
+  width: 300rpx;
+  height: 300rpx;
+  background: radial-gradient(circle, rgba(255, 235, 59, 0.6) 0%, rgba(255, 193, 7, 0) 70%);
+  border-radius: 50%;
+  z-index: 0;
+  animation: sunPulse 1s ease-in-out infinite alternate;
+}
+
+.sun-core-emoji {
+  font-size: 140rpx;
+  line-height: 1;
+  position: relative;
+  z-index: 2;
+  text-shadow: 0 0 40rpx rgba(255, 160, 0, 0.5);
+}
+
+.sun-add-text {
+  position: absolute;
+  top: 140rpx;
+  font-size: 40rpx;
+  font-weight: 900;
+  color: #FF6F00;
+  white-space: nowrap;
+  text-shadow: 0 2rpx 4rpx rgba(255, 255, 255, 0.8), 0 0 10rpx rgba(255, 160, 0, 0.3);
+  z-index: 3;
+  animation: textFadeIn 0.5s ease-out forwards;
+}
+
+@keyframes flyAndCollect {
+  0% {
+    transform: scale(0.2);
+    opacity: 0;
+  }
+  15% {
+    transform: scale(1.1);
+    opacity: 1;
+  }
+  30% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    /* Fly to top left (approximate progress bar location) */
+    transform: translate(-35vw, -45vh) scale(0.2);
+    opacity: 0;
+  }
+}
+
+@keyframes sunPulse {
+  from { transform: scale(0.9); opacity: 0.5; }
+  to { transform: scale(1.1); opacity: 0.8; }
+}
+
+@keyframes textFadeIn {
+  0% { transform: translateY(20rpx); opacity: 0; }
+  100% { transform: translateY(0); opacity: 1; }
+}