feat: 修复wiki样式问题

app.json

@@ -8,7 +8,8 @@
         "pages/wiki/index",
         "pages/profile/index",
         "pages/plant-detail/edit/index",
-        "pages/plant-detail/index"
+        "pages/plant-detail/index",
+        "pages/wiki/detail/index"
     ],
     "window": {
         "backgroundTextStyle": "light",

pages/plant-detail/index.js

@@ -59,6 +59,22 @@ const INITIAL_GROWTH_RECORDS = [
         title: '购入记录',
         content: '在花市购入，高度约30cm，有5片成熟叶子。',
         image: 'monstera_plant_1769757312755.png'
+    },
+    {
+        id: '9',
+        date: '2025-08-15',
+        type: 'growth',
+        title: '生机勃勃',
+        content: '夏天长得飞快，已经是一盆茂盛的小森林了。',
+        image: 'succulent_garden_1769757406309.png'
+    },
+    {
+        id: '10',
+        date: '2025-07-01',
+        type: 'growth',
+        title: '第一片叶子',
+        content: '入手后的第一片新叶，浅绿色的非常娇嫩。',
+        image: 'snake_plant_1769757638773.png'
     }
 ];
 
@@ -99,7 +115,8 @@ Page({
         // Growth Modal
         showGrowthModal: false,
         newRecordType: 'growth',
-        newRecordContent: ''
+        newRecordContent: '',
+        newRecordImage: ''
     },
 
     onLoad(options) {
@@ -198,7 +215,14 @@ Page({
     },
 
     // Growth Record Logic
-    openGrowthModal() { this.setData({ showGrowthModal: true, newRecordContent: '', newRecordType: 'growth' }); },
+    openGrowthModal() {
+        this.setData({
+            showGrowthModal: true,
+            newRecordContent: '',
+            newRecordType: 'growth',
+            newRecordImage: ''
+        });
+    },
     onGrowthPopupVisibleChange(e) { this.setData({ showGrowthModal: e.detail.visible }); },
     closeGrowthModal() { this.setData({ showGrowthModal: false }); },
 
@@ -214,6 +238,33 @@ Page({
     },
     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}`;
+
+        wx.previewImage({
+            current: fullPath,
+            urls: [fullPath]
+        });
+    },
+
     handleAddRecord() {
         if (!this.data.newRecordContent.trim()) return;
 
@@ -226,7 +277,8 @@ Page({
             date: dateStr,
             type: this.data.newRecordType,
             title: mapTitle[this.data.newRecordType],
-            content: this.data.newRecordContent
+            content: this.data.newRecordContent,
+            image: this.data.newRecordImage
         };
 
         this.setData({

pages/plant-detail/index.wxml

@@ -140,7 +140,15 @@
                 <text>{{item.title}}</text>
               </view>
               <text class="timeline-desc">{{item.content}}</text>
-              <t-image wx:if="{{item.image}}" src="{{tools.resolvePath(item.image)}}" mode="widthFix" width="100%" class="timeline-img" />
+              <t-image 
+                wx:if="{{item.image}}" 
+                src="{{tools.resolvePath(item.image)}}" 
+                mode="widthFix" 
+                width="100%" 
+                class="timeline-img" 
+                bindtap="handlePreviewRecordImage" 
+                data-src="{{item.image}}" 
+              />
             </view>
           </view>
         </view>
@@ -200,6 +208,22 @@
             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">

pages/plant-detail/index.wxss

@@ -714,3 +714,50 @@ page {
   box-shadow: 0 0 0 6rpx rgba(85, 139, 47, 0.1);
 }
 
+/* Record Image Upload */
+.record-image-upload {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20rpx;
+  margin-top: 8rpx;
+}
+
+.upload-add-btn {
+  width: 160rpx;
+  height: 160rpx;
+  background: #FAFAFA;
+  border: 2rpx dashed #d9d9d9;
+  border-radius: 20rpx;
+  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: 160rpx;
+  height: 160rpx;
+}
+
+.remove-img-btn {
+  position: absolute;
+  top: -12rpx;
+  right: -12rpx;
+  width: 36rpx;
+  height: 36rpx;
+  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);
+}
+
+

pages/wiki/detail/index.js

@@ -0,0 +1,65 @@
+// pages/wiki/detail/index.js
+import { MOCK_WIKI } from '../../../utils/mockData';
+
+Page({
+    data: {
+        plant: null,
+        activeImageIndex: 0,
+        swiperList: []
+    },
+
+    onLoad(options) {
+        if (options.id) {
+            this.loadPlantDetail(options.id);
+        }
+    },
+
+    loadPlantDetail(id) {
+        // Find plant in MOCK_WIKI
+        const plant = MOCK_WIKI.find(p => p.id === id);
+        if (plant) {
+            // Set Page Title
+            wx.setNavigationBarTitle({
+                title: plant.name
+            });
+
+            // Prepare swiper list
+            const swiperList = (plant.images || []).map(img => {
+                return (img.indexOf('http') === 0 || img.indexOf('wxfile') === 0) ? img : `/assets/${img}`;
+            });
+
+            // Ensure some default values if missing
+            const enrichedPlant = {
+                ...plant,
+                light: plant.light || { level: '中等', description: '适合明亮的散射光' },
+                water: plant.water || { frequency: '每周1-2次', description: '保持土壤微润' },
+                temperature: plant.temperature || '15-28℃',
+                humidity: plant.humidity || '50%-70%',
+                soil: plant.soil || '疏松透气的营养土',
+                fertilizer: plant.fertilizer || '生长季每月施一次薄肥',
+                toxicity: plant.toxicity || '无毒',
+                commonPests: plant.commonPests || ['红蜘蛛'],
+                careTips: plant.careTips || ['注意通风', '定期清洁叶面']
+            };
+
+            this.setData({
+                plant: enrichedPlant,
+                swiperList: swiperList
+            });
+        }
+    },
+
+    onSwiperChange(e) {
+        this.setData({
+            activeImageIndex: e.detail.current
+        });
+    },
+
+    onShareAppMessage() {
+        if (!this.data.plant) return {};
+        return {
+            title: `植物百科 - ${this.data.plant.name}`,
+            path: `/pages/wiki/detail/index?id=${this.data.plant.id}`
+        };
+    }
+});

pages/wiki/detail/index.json

@@ -0,0 +1,11 @@
+{
+    "navigationBarTitleText": "百科详情",
+    "navigationBarBackgroundColor": "#FFFFFF",
+    "navigationBarTextStyle": "black",
+    "usingComponents": {
+        "t-icon": "tdesign-miniprogram/icon/icon",
+        "t-image": "tdesign-miniprogram/image/image",
+        "t-swiper": "tdesign-miniprogram/swiper/swiper",
+        "t-button": "tdesign-miniprogram/button/button"
+    }
+}

pages/wiki/detail/index.wxml

@@ -0,0 +1,155 @@
+<!--pages/wiki/detail/index.wxml-->
+<view class="wiki-detail">
+  <!-- Header Area -->
+  <view class="wd-header">
+    <view class="wd-gallery-container">
+      <t-swiper
+        t-class="custom-swiper"
+        current="{{activeImageIndex}}"
+        bind:change="onSwiperChange"
+        height="500rpx"
+        list="{{swiperList}}"
+        navigation="{{ { type: '' } }}"
+      />
+      <!-- Gradient applied externally to match plant-detail if needed or just rely on image -->
+      <view class="wd-gradient-overlay"></view>
+    </view>
+    
+    <!-- Custom Indicators -->
+    <view class="wd-indicators" wx:if="{{swiperList.length > 1}}">
+      <view 
+        wx:for="{{swiperList}}" 
+        wx:key="index" 
+        class="wd-dot {{index === activeImageIndex ? 'active' : ''}}"
+      ></view>
+    </view>
+
+    <!-- Header Overlay Info -->
+    <view class="wd-overlay">
+      <view class="wd-title">
+        <text class="wd-name">{{plant.name}}</text>
+        <text class="wd-scientific">{{plant.scientificName}}</text>
+      </view>
+      <view class="wd-badges">
+        <text class="wd-badge">{{plant.family}}</text>
+        <text class="wd-badge">{{plant.category}}</text>
+        <text class="wd-badge">难度: {{plant.difficulty || 'Easy'}}</text>
+      </view>
+    </view>
+  </view>
+
+  <!-- Content Area -->
+  <view class="wd-content-wrapper">
+    <scroll-view class="wd-content" scroll-y enhanced show-scrollbar="{{false}}">
+      <!-- Description Section -->
+      <section class="wd-section">
+        <view class="wd-card">
+          <text class="wd-text">{{plant.description}}</text>
+        </view>
+      </section>
+
+      <!-- Basic Info Section -->
+      <section class="wd-section">
+        <view class="section-title">
+          <t-icon name="info-circle" size="40rpx" color="#558B2F" />
+          <text>基础档案</text>
+        </view>
+        <view class="wd-card">
+          <view class="wd-grid">
+            <view class="wd-stat-item">
+              <text class="wd-label">原产地</text>
+              <text class="wd-value">{{plant.origin}}</text>
+            </view>
+            <view class="wd-stat-item">
+              <text class="wd-label">毒性</text>
+              <text class="wd-value">{{plant.toxicity}}</text>
+            </view>
+          </view>
+        </view>
+      </section>
+
+      <!-- Care Guide Section -->
+      <section class="wd-section">
+        <view class="section-title">
+          <t-icon name="sprout" size="40rpx" color="#558B2F" />
+          <text>养护指南</text>
+        </view>
+        <view class="wd-card">
+          <!-- Light -->
+          <view class="requirement-item">
+            <view class="req-icon">
+              <t-icon name="sunny" size="40rpx" color="#558B2F" />
+            </view>
+            <view class="req-content">
+              <text class="req-title">光照 ({{plant.light.level}})</text>
+              <text class="req-desc">{{plant.light.description}}</text>
+            </view>
+          </view>
+
+          <!-- Water -->
+          <view class="requirement-item">
+            <view class="req-icon">
+              <t-icon name="water" size="40rpx" color="#558B2F" />
+            </view>
+            <view class="req-content">
+              <text class="req-title">水分 ({{plant.water.frequency}})</text>
+              <text class="req-desc">{{plant.water.description}}</text>
+            </view>
+          </view>
+
+          <!-- Environment -->
+          <view class="requirement-item">
+            <view class="req-icon">
+              <t-icon name="temperate" size="40rpx" color="#558B2F" />
+            </view>
+            <view class="req-content">
+              <text class="req-title">环境</text>
+              <text class="req-desc">温度: {{plant.temperature}}</text>
+              <text class="req-desc" style="display: block; margin-top: 4rpx;">湿度: {{plant.humidity}}</text>
+            </view>
+          </view>
+
+          <!-- Soil & Fertilizer -->
+          <view class="requirement-item">
+            <view class="req-icon">
+              <t-icon name="layers" size="40rpx" color="#558B2F" />
+            </view>
+            <view class="req-content">
+              <text class="req-title">土壤与肥料</text>
+              <text class="req-desc">土: {{plant.soil}}</text>
+              <text class="req-desc" style="display: block; margin-top: 4rpx;">肥: {{plant.fertilizer}}</text>
+            </view>
+          </view>
+        </view>
+      </section>
+
+      <!-- FAQ Section -->
+      <section class="wd-section">
+        <view class="section-title">
+          <t-icon name="error-circle" size="40rpx" color="#558B2F" />
+          <text>常见问题</text>
+        </view>
+        <view class="wd-card">
+          <view class="pest-section">
+            <text class="wd-label" style="display: block; margin-bottom: 16rpx;">易发病虫害</text>
+            <view class="pest-tags">
+              <text wx:for="{{plant.commonPests}}" wx:key="*this" class="pest-tag">{{item}}</text>
+            </view>
+          </view>
+          <view class="tips-section">
+            <text class="wd-label" style="display: block; margin-bottom: 16rpx; margin-top: 32rpx;">专家提示</text>
+            <view class="care-tips-list">
+              <view wx:for="{{plant.careTips}}" wx:key="*this" class="tip-item">
+                <view class="tip-dot"></view>
+                <text class="tip-text">{{item}}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </section>
+
+      <!-- Bottom Spacer -->
+      <view style="height: 100rpx;"></view>
+    </scroll-view>
+  </view>
+</view>

pages/wiki/detail/index.wxss

@@ -0,0 +1,315 @@
+/* pages/wiki/detail/index.wxss */
+.wiki-detail {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #F9FAFB;
+}
+
+/* Page Layout */
+page {
+  height: 100vh;
+  overflow: hidden; 
+}
+
+/* Hide Scrollbar Globally */
+::-webkit-scrollbar {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  color: transparent !important;
+}
+
+scroll-view ::-webkit-scrollbar {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  color: transparent !important;
+}
+
+/* Header Area */
+.wd-header {
+  height: 500rpx;
+  position: relative;
+  background: #000;
+}
+
+/* Content Wrapper handles the flex growth and positioning overlap */
+.wd-content-wrapper {
+  flex: 1;
+  position: relative;
+  margin-top: -32rpx;
+  z-index: 20;
+  overflow: hidden; /* Ensure scroll-view is contained */
+}
+
+/* Content Scroll View fills the wrapper */
+.wd-content {
+  width: 100%;
+  height: 100%;
+}
+
+/* Force override TDesign swiper radius */
+.custom-swiper {
+  border-radius: 0 !important;
+  overflow: hidden;
+  --td-swiper-radius: 0px !important;
+}
+
+.custom-swiper .t-swiper { 
+  border-radius: 0 !important;
+}
+
+t-swiper {
+  border-radius: 0 !important;
+}
+
+.wd-gallery-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.wd-gradient-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 240rpx;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
+  pointer-events: none;
+  z-index: 10;
+}
+
+.wd-indicators {
+  position: absolute;
+  bottom: 24rpx;
+  right: 24rpx;
+  display: flex;
+  gap: 12rpx;
+  z-index: 20;
+}
+
+.wd-dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.4);
+  transition: all 0.3s;
+}
+
+.wd-dot.active {
+  background: white;
+  width: 24rpx;
+  border-radius: 8rpx;
+}
+
+.wd-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 32rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  pointer-events: none;
+  z-index: 20;
+}
+
+.wd-name {
+  font-size: 56rpx;
+  color: #FFFFFF;
+  font-weight: 800;
+  margin-bottom: 8rpx;
+}
+
+.wd-scientific {
+  font-size: 32rpx;
+  color: rgba(255, 255, 255, 0.8);
+  font-style: italic;
+  font-family: serif;
+  margin-bottom: 24rpx;
+}
+
+.wd-badges {
+  display: flex;
+  gap: 16rpx;
+  flex-wrap: wrap;
+}
+
+.wd-badge {
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(4px);
+  padding: 8rpx 20rpx;
+  border-radius: 24rpx;
+  font-size: 24rpx;
+  color: #FFFFFF;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.wd-section {
+  margin-bottom: 32rpx;
+  animation: fadeIn 0.5s ease-out;
+  padding: 0 32rpx;
+}
+
+/* First section specific override: Adjust padding and background to create the seamless rounded look */
+.wd-section:first-child {
+  padding: 0;
+  margin-bottom: 48rpx;
+}
+
+.wd-section:first-child .wd-card {
+  border-top-left-radius: 40rpx;
+  border-top-right-radius: 40rpx;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  padding: 48rpx 32rpx;
+  box-shadow: none; /* Seamless blend */
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20rpx); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  margin-bottom: 24rpx;
+  padding-left: 8rpx;
+}
+
+.section-title text {
+  font-size: 34rpx;
+  font-weight: 700;
+  color: #111827;
+}
+
+.wd-text {
+  font-size: 30rpx;
+  line-height: 1.6;
+  color: #4B5563;
+}
+
+.wd-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 32rpx;
+}
+
+.wd-stat-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+}
+
+.wd-label {
+  font-size: 24rpx;
+  color: #9CA3AF;
+  text-transform: uppercase;
+  letter-spacing: 1rpx;
+}
+
+.wd-value {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #1F2937;
+}
+
+.wd-card {
+  background: white;
+  border-radius: 24rpx;
+  padding: 24rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.02);
+  transition: all 0.3s;
+}
+
+/* Requirement Items (Compact) */
+.requirement-item {
+  display: flex;
+  gap: 24rpx;
+  margin-bottom: 24rpx;
+  padding-bottom: 24rpx;
+  border-bottom: 2rpx solid #F3F4F6;
+}
+
+.requirement-item:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.req-icon {
+  width: 80rpx;
+  height: 80rpx;
+  background: #F1F8E9;
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.req-content {
+  flex: 1;
+}
+
+.req-title {
+  display: block;
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #1F2937;
+  margin-bottom: 8rpx;
+}
+
+.req-desc {
+  font-size: 26rpx;
+  color: #6B7280;
+  line-height: 1.5;
+}
+
+/* FAQ / Pests */
+.pest-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+
+.pest-tag {
+  background: #FEF2F2;
+  color: #DC2626;
+  padding: 12rpx 24rpx;
+  border-radius: 16rpx;
+  font-size: 26rpx;
+  font-weight: 500;
+}
+
+.care-tips-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.tip-item {
+  display: flex;
+  gap: 16rpx;
+  align-items: flex-start;
+}
+
+.tip-dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background: #558B2F;
+  margin-top: 14rpx;
+  flex-shrink: 0;
+}
+
+.tip-text {
+  font-size: 28rpx;
+  color: #4B5563;
+  line-height: 1.5;
+}

pages/wiki/index.js

@@ -3,15 +3,28 @@ import { MOCK_WIKI } from '../../utils/mockData';
 
 Page({
     data: {
-        wikiList: [],
+        // Data Source (effectively the backend result)
+        filteredSourceList: [],
+
+        // Display Data (rendered list)
         displayedList: [],
+
+        // Filter State
         searchQuery: '',
         activeCategory: '全部',
+
+        // Pagination State
+        page: 1,
+        pageSize: 5,
+        isLoading: false,
+        hasMore: true,
+
+        // Modal State
         showIdentifyModal: false
     },
 
     onLoad() {
-        this.setData({ wikiList: MOCK_WIKI });
+        // Initial Load
         this.filterList();
     },
 
@@ -22,23 +35,29 @@ Page({
         }
     },
 
+    // Search Input Handler
     onSearchInput(e) {
-        // TDesign search event: e.detail.value
         this.setData({ searchQuery: e.detail.value }, () => {
             this.filterList();
         });
     },
 
+    // Category Filter Handler
     setCategory(e) {
         this.setData({ activeCategory: e.currentTarget.dataset.cat }, () => {
             this.filterList();
         });
     },
 
+    /**
+     * Simulates "Backend" Search & Filtering
+     * Resets pagination and prepares the filtered data source.
+     */
     filterList() {
-        const { wikiList, searchQuery, activeCategory } = this.data;
+        const { searchQuery, activeCategory } = this.data;
-        let result = wikiList;
+        let result = MOCK_WIKI;
 
+        // Filter by Search Query
         if (searchQuery) {
             const q = searchQuery.toLowerCase();
             result = result.filter(item =>
@@ -47,17 +66,73 @@ Page({
             );
         }
 
+        // Filter by Category
         if (activeCategory !== '全部') {
             result = result.filter(item => item.category.includes(activeCategory));
         }
 
-        this.setData({ displayedList: result });
+        this.setData({
+            filteredSourceList: result,
+            displayedList: [],
+            page: 1,
+            hasMore: true
+        }, () => {
+            this.loadMoreData();
+        });
+    },
+
+    /**
+     * Simulates "Backend" Pagination
+     * Appends the next page of data from filteredSourceList to displayedList.
+     * key-value data path update is used for performance optimization.
+     */
+    loadMoreData() {
+        const { isLoading, hasMore, page, pageSize, filteredSourceList, displayedList } = this.data;
+
+        if (isLoading || !hasMore) return;
+
+        this.setData({ isLoading: true });
+
+        // Simulate Network Delay
+        setTimeout(() => {
+            const startIndex = (page - 1) * pageSize;
+            const endIndex = startIndex + pageSize;
+            const newItems = filteredSourceList.slice(startIndex, endIndex);
+
+            const isLastPage = endIndex >= filteredSourceList.length;
+
+            if (newItems.length > 0) {
+                // Performance Optimization: Use data path to append items
+                // Instead of setData({ displayedList: [...old, ...new] })
+                const updateData = {};
+                const currentLen = displayedList.length;
+                newItems.forEach((item, index) => {
+                    updateData[`displayedList[${currentLen + index}]`] = item;
+                });
+
+                updateData['page'] = page + 1;
+                updateData['hasMore'] = !isLastPage;
+                updateData['isLoading'] = false;
+
+                this.setData(updateData);
+            } else {
+                this.setData({
+                    hasMore: false,
+                    isLoading: false
+                });
+            }
+        }, 500);
+    },
+
+    // Infinite Scroll Handler
+    onReachBottom() {
+        this.loadMoreData();
     },
 
     goToDetail(e) {
         const item = e.currentTarget.dataset.item;
         wx.navigateTo({
-            url: `/pages/plant-detail/index?id=${item.id}&mode=wiki`
+            url: `/pages/wiki/detail/index?id=${item.id}`
         });
     },
 

pages/wiki/index.json

@@ -8,6 +8,8 @@
         "t-popup": "tdesign-miniprogram/popup/popup",
         "t-cell": "tdesign-miniprogram/cell/cell",
         "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
-        "t-icon": "tdesign-miniprogram/icon/icon"
+        "t-icon": "tdesign-miniprogram/icon/icon",
+        "t-loading": "tdesign-miniprogram/loading/loading",
+        "t-button": "tdesign-miniprogram/button/button"
     }
 }

pages/wiki/index.wxml

@@ -1,7 +1,13 @@
 <!--pages/wiki/index.wxml-->
 <view class="wiki-page">
 
-  <view class="wiki-scroll-area">
+  <scroll-view 
+    class="wiki-scroll-area" 
+    scroll-y 
+    bindscrolltolower="onReachBottom"
+    enhanced
+    show-scrollbar="{{false}}"
+  >
     <view class="search-section">
         <t-search placeholder="搜索植物名称，如：龟背竹" value="{{searchQuery}}" bind:change="onSearchInput" shape="round" />
     </view>
@@ -25,22 +31,45 @@
     <view class="wiki-list">
        <view wx:for="{{displayedList}}" wx:key="id" class="wiki-card" bindtap="goToDetail" data-item="{{item}}">
           <view class="wiki-image">
-             <t-image src="/assets/{{item.images[0]}}" mode="aspectFill" width="100%" height="100%" />
+             <t-image src="/assets/{{item.images[0]}}" mode="aspectFill" width="100%" height="100%" lazy />
           </view>
           <view class="wiki-info">
              <view class="wiki-top">
                 <text class="wiki-name">{{item.name}}</text>
                 <text class="scientific-name">{{item.scientificName}}</text>
              </view>
-             <t-tag size="small" variant="light" theme="success">{{item.category}}</t-tag>
+             
+             <!-- Tags Row -->
+             <view class="tags-row">
+                <t-tag 
+                    wx:for="{{item.tags}}" 
+                    wx:key="*this" 
+                    wx:for-item="tag"
+                    size="small" 
+                    variant="light" 
+                    theme="primary"
+                    style="margin-right: 8rpx; margin-bottom: 8rpx;"
+                >
+                    {{tag}}
+                </t-tag>
+             </view>
           </view>
           <t-icon name="chevron-right" size="48rpx" color="#ccc" />
        </view>
     </view>
     
+    <!-- Loading / No More Data Footer -->
+    <view class="loading-footer">
+        <t-loading wx:if="{{isLoading}}" theme="circular" size="40rpx" text="加载中..." inherit-color />
+        <text wx:elif="{{!hasMore && displayedList.length > 0}}" class="no-more-text">没有更多了</text>
+        <view wx:elif="{{!hasMore && displayedList.length === 0}}" class="empty-state">
+            <text>没有找到相关植物</text>
+        </view>
+    </view>
+
     <!-- Spacer -->
      <view style="height: 160rpx;"></view>
-  </view>
+  </scroll-view>
 
   <t-fab icon="scan" text="植物识别" bind:click="openIdentifyModal" aria-label="植物识别"></t-fab>
 

pages/wiki/index.wxss

@@ -10,26 +10,31 @@
 
 .wiki-scroll-area {
   flex: 1;
-  overflow-y: auto;
+  overflow-y: hidden; /* Scroll-view handles overflow */
-  padding: 20rpx 40rpx;
+  box-sizing: border-box;
 }
 
+/* Scroll-view inner content padding wrapper if needed, 
+   but we can apply padding to children or use a wrapper view inside.
+   Usually easier to apply padding to the items or a wrapper inside scroll-view. */
+
 .search-section {
+    padding: 20rpx 40rpx 0;
     margin-bottom: 32rpx;
 }
 
 .category-scroll {
   display: flex;
-  flex-wrap: wrap; /* TDesign Tags might wrap nicely */
+  flex-wrap: wrap;
+  padding: 0 40rpx;
   margin-bottom: 48rpx;
 }
 
-/* Old chips removed, replaced by t-tag */
-
 .wiki-list {
   display: flex;
   flex-direction: column;
   gap: 32rpx;
+  padding: 0 40rpx;
 }
 
 .wiki-card {
@@ -40,6 +45,11 @@
   align-items: center;
   gap: 36rpx;
   box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.03);
+  transition: transform 0.1s;
+}
+
+.wiki-card:active {
+    transform: scale(0.98);
 }
 
 .wiki-image {
@@ -52,12 +62,37 @@
 }
 .wiki-image t-image { width: 100%; height: 100%; display: block; }
 
-.wiki-info { flex: 1; }
+.wiki-info { flex: 1; min-width: 0; }
 
-.wiki-top { margin-bottom: 8rpx; }
+.wiki-top { margin-bottom: 12rpx; }
 .wiki-name { font-size: 34rpx; font-weight: 700; color: var(--text-main); display: block; margin-bottom: 4rpx; }
 .scientific-name { font-size: 24rpx; color: #90A4AE; font-style: italic; font-family: serif; display: block; }
 
+.tags-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8rpx; 
+}
+
+/* Loading Footer */
+.loading-footer {
+    padding: 40rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.no-more-text {
+    font-size: 24rpx;
+    color: #CCC;
+}
+
+.empty-state {
+    padding: 80rpx 0;
+    text-align: center;
+    color: #999;
+    font-size: 28rpx;
+}
 
 /* Popup Styles */
 .popup-content {

utils/mockData.js

@@ -330,92 +330,266 @@ export const MOCK_WIKI = [
         name: '龟背竹',
         scientificName: 'Monstera deliciosa',
         family: '天南星科',
-        alias: ['蓬莱蕉', '铁丝兰'],
         images: ['monstera_plant_1769757312755.png', 'succulent_garden_1769757406309.png'],
-        category: '观叶植物',
+        category: '观叶',
+        tags: ['耐阴', '净化空气', '新手友好'],
         difficulty: 'Easy',
-        origin: '墨西哥及中美洲热带雨林',
+        description: '龟背竹是天南星科龟背竹属的多年生常绿灌木，因其叶片形状奇特，裂纹状似龟背而得名。它不仅观赏价值极高，还具有极强的空气净化能力。',
-        description: '龟背竹是天南星科龟背竹属的多年生常绿灌木，因其叶片形状奇特，裂纹状似龟背而得名。它不仅观赏价值极高，还具有极强的空气净化能力，能有效吸收甲醛等有害气体，被称为天然的"清道夫"。',
+        origin: '墨西哥及中美洲',
-        light: {
+        toxicity: '汁液有轻微毒性',
-            level: 'Medium',
+        light: { level: '中等光照', description: '喜欢明亮的散射光，忌强光直射。夏季需遮阴。' },
-            description: '喜欢明亮的散射光，忌强光直射。夏季需遮阴，冬季可适当增加光照。光照不足会导致叶片开裂少，叶柄细长。'
+        water: { frequency: '每周1-2次', description: '保持土壤湿润但不过湿。夏季需经常向叶面喷水增加湿度。' },
-        },
+        temperature: '20-30℃',
-        water: {
+        humidity: '60%-80%',
-            frequency: '每周1-2次',
+        soil: '疏松肥沃、排水良好的微酸性土壤。',
-            description: '保持土壤湿润但不过湿。夏季需经常向叶面喷水增加湿度。冬季减少浇水，保持盆土微干。'
+        fertilizer: '生长季每半月施一次稀薄液肥。',
-        },
-        soil: '疏松肥沃、排水良好的微酸性腐叶土或泥炭土。',
-        temperature: '20-30℃，生长适温。冬季需保持在5℃以上。',
-        humidity: '60%-80%，喜高湿环境。',
-        fertilizer: '生长季（4-9月）每半月施一次稀薄液肥。',
-        toxicity: '汁液有轻微毒性，误食可能引起口腔刺痛，触碰汁液后应洗手。',
         commonPests: ['介壳虫', '红蜘蛛'],
-        careTips: [
+        careTips: ['定期擦拭叶片', '不要轻易剪除气根', '保持环境通风']
-            '定期用湿布擦拭叶片，保持叶面清洁亮泽。',
-            '气根对于吸收水分和支撑植株很重要，不要轻易剪除，可引导其进入土中。',
-            '每1-2年换盆一次，有利于根系生长。'
-        ]
     },
     {
         id: '2',
         name: '虎皮兰',
         scientificName: 'Sansevieria trifasciata',
         family: '百合科',
-        alias: ['虎尾兰', '千岁兰'],
+        images: ['snake_plant_1769757638773.png'],
-        images: ['snake_plant_1769757638773.png', 'monstera_plant_1769757312755.png'],
+        category: '观叶',
-        category: '净化空气',
+        tags: ['耐旱', '吸甲醛', '卧室绿植'],
         difficulty: 'Easy',
-        origin: '西非热带地区',
+        description: '虎皮兰生命力极强，对环境适应性好，能释放大量氧气，尤其是在夜间。非常适合摆放在卧室或客厅。',
-        description: '虎皮兰是百合科虎尾兰属的多年生草本植物。它生命力极强，对环境适应性好，能释放大量氧气，尤其是在夜间，非常适合摆放在卧室。',
+        origin: '西非',
-        light: {
+        toxicity: '微毒，避免误食',
-            level: 'Low',
+        light: { level: '低至高光照', description: '对光照适应性强，耐阴，也耐强光。长期在阴暗处斑纹会变淡。' },
-            description: '对光照适应性强，耐阴，也耐强光。但长期在阴暗处生长，叶片斑纹会变淡。'
+        water: { frequency: '每2-3周1次', description: '极其耐旱，宁干勿湿。盆土完全干透再浇水。' },
-        },
+        temperature: '18-30℃',
-        water: {
+        humidity: '适应性强，耐干燥',
-            frequency: '每2周1次',
-            description: '极其耐旱，宁干勿湿。盆土完全干透再浇水。冬季休眠期严格控制浇水。'
-        },
         soil: '透气性极佳的沙质土壤。',
-        temperature: '20-30℃。不耐寒，冬季室内温度不低于10℃。',
+        fertilizer: '生长季每月施一次复合肥即可。',
-        humidity: '对湿度无特殊要求，耐干燥。',
+        commonPests: ['炭疽病', '烂根'],
-        fertilizer: '生长季每月施一次复合肥即可，忌浓肥。',
+        careTips: ['最怕积水', '建议用浅盆种植', '保持叶面清洁']
-        toxicity: '有微毒，避免宠物误食。',
-        commonPests: ['炭疽病', '软腐病'],
-        careTips: [
-            '最怕积水，浇水过多容易烂根。',
-            '根系不发达，建议使用浅盆种植。',
-            '由于叶片厚重，高植株建议用重盆以免翻倒。'
-        ]
     },
     {
         id: '3',
         name: '月季',
         scientificName: 'Rosa chinensis',
         family: '蔷薇科',
-        alias: ['月月红', '长春花'],
+        images: ['garden_banner.png'],
-        images: ['lavender_pot_1769757638773.png', 'succulent_garden_1769757406309.png'],
+        category: '观花',
-        category: '观花植物',
+        tags: ['花期长', '芳香', '喜阳'],
         difficulty: 'Medium',
+        description: '月季花被称为"花中皇后"，四季开花，花色丰富，芳香宜人。是中国十大名花之一。',
         origin: '中国',
-        description: '月季花被称为"花中皇后"，四季开花，花色丰富，芳香宜人。它是中国十大名花之一，也是世界各地广泛栽培的园艺植物。',
+        toxicity: '无毒',
-        light: {
+        light: { level: '高光照', description: '喜阳光充足，每天至少需要6小时直射光。光照不足会导致开花少。' },
-            level: 'High',
+        water: { frequency: '见干见湿', description: '生长期保持土壤湿润，不可积水。夏季早晚各浇一次。' },
-            description: '喜阳光充足，每天至少需要6小时直射光。光照不足会导致开花少、花朵小、香味淡。'
+        temperature: '15-26℃',
-        },
+        humidity: '喜通风良好环境',
-        water: {
-            frequency: '见干见湿',
-            description: '生长期保持土壤湿润，不可积水。夏季早晚各浇一次，冬季减少浇水。'
-        },
         soil: '富含有机质、排水良好的微酸性土壤。',
-        temperature: '15-26℃。较耐寒，部分品种可耐-15℃低温。',
+        fertilizer: '喜肥，勤施薄肥。花期需追肥。',
-        humidity: '喜通风良好环境，避免闷热潮湿，易生病。',
+        commonPests: ['蚜虫', '黑斑病', '白粉病'],
-        fertilizer: '喜肥，勤施薄肥。萌芽期、花蕾期需追肥，花后及时修剪并补肥。',
+        careTips: ['花后及时剪去残花', '注意通风预防病害', '冬季进行重剪']
-        toxicity: '无毒。',
+    },
-        commonPests: ['蚜虫', '白粉病', '黑斑病'],
+    {
-        careTips: [
+        id: '4',
-            '勤修剪是养好月季的关键，花后及时剪去残花。',
+        name: '多肉拼盘',
-            '注意通风，定期喷洒杀菌剂预防病害。',
+        scientificName: 'Echeveria spp.',
-            '冬季进行重剪，利于来年株型和开花。'
+        family: '景天科',
-        ]
+        images: ['succulent_garden_1769757406309.png'],
+        category: '多肉',
+        tags: ['可爱', '治愈系', '懒人植物'],
+        difficulty: 'Easy',
+        description: '多肉植物形态各异，叶片肥厚多汁，适合组合盆栽。',
+        origin: '美洲'
+    },
+    {
+        id: '5',
+        name: '发财树',
+        scientificName: 'Pachira aquatica',
+        family: '锦葵科',
+        images: ['monstera_plant_1769757312755.png'],
+        category: '观叶',
+        tags: ['寓意好', '耐旱', '办公桌'],
+        difficulty: 'Medium',
+        description: '株形美观，茎干叶片全年青翠，寓意招财进宝。',
+        origin: '中美洲'
+    },
+    {
+        id: '6',
+        name: '绿萝',
+        scientificName: 'Epipremnum aureum',
+        family: '天南星科',
+        images: ['monstera_plant_1769757312755.png'],
+        category: '观叶',
+        tags: ['新手必入', '遇水即活', '垂吊'],
+        difficulty: 'Easy',
+        description: '生命力顽强，有"生命之花"的美誉，极易扦插繁殖。',
+        origin: '所罗门群岛'
+    },
+    {
+        id: '7',
+        name: '琴叶榕',
+        scientificName: 'Ficus lyrata',
+        family: '桑科',
+        images: ['snake_plant_1769757638773.png'],
+        category: '观叶',
+        tags: ['北欧风', '网红植物', '大叶'],
+        difficulty: 'Hard',
+        description: '叶片巨大，形似提琴，是极具格调的室内大型盆栽。',
+        origin: '西非'
+    },
+    {
+        id: '8',
+        name: '蝴蝶兰',
+        scientificName: 'Phalaenopsis aphrodite',
+        family: '兰科',
+        images: ['garden_banner.png'],
+        category: '观花',
+        tags: ['高雅', '花期长', '年宵花'],
+        difficulty: 'Medium',
+        description: '花朵形似蝴蝶飞舞，色彩艳丽，素有"洋兰皇后"之称。',
+        origin: '热带亚洲'
+    },
+    {
+        id: '9',
+        name: '仙人掌',
+        scientificName: 'Opuntia stricta',
+        family: '仙人掌科',
+        images: ['succulent_garden_1769757406309.png'],
+        category: '多肉',
+        tags: ['超耐旱', '抗辐射', '奇特'],
+        difficulty: 'Easy',
+        description: '茎肉质，叶退化为刺，极度耐旱，无需频繁打理。',
+        origin: '美洲'
+    },
+    {
+        id: '10',
+        name: '栀子花',
+        scientificName: 'Gardenia jasminoides',
+        family: '茜草科',
+        images: ['garden_banner.png'],
+        category: '观花',
+        tags: ['芳香', '洁白', '喜酸性土'],
+        difficulty: 'Medium',
+        description: '花色洁白，芳香馥郁，叶色四季常绿。',
+        origin: '中国'
+    },
+    {
+        id: '11',
+        name: '散尾葵',
+        scientificName: 'Dypsis lutescens',
+        family: '棕榈科',
+        images: ['monstera_plant_1769757312755.png'],
+        category: '观叶',
+        tags: ['热带风情', '加湿器', '大型'],
+        difficulty: 'Medium',
+        description: '羽状叶片飘逸，具有浓郁的热带风情，能有效增加空气湿度。',
+        origin: '马达加斯加'
+    },
+    {
+        id: '12',
+        name: '生石花',
+        scientificName: 'Lithops',
+        family: '番杏科',
+        images: ['succulent_garden_1769757406309.png'],
+        category: '多肉',
+        tags: ['屁屁花', '软萌', '奇趣'],
+        difficulty: 'Medium',
+        description: '外形酷似彩色鹅卵石，也被称为"有生命的石头"。',
+        origin: '南非'
+    },
+    {
+        id: '13',
+        name: '茉莉花',
+        scientificName: 'Jasminum sambac',
+        family: '木犀科',
+        images: ['garden_banner.png'],
+        category: '观花',
+        tags: ['天下第一香', '泡茶', '喜阳'],
+        difficulty: 'Medium',
+        description: '花香浓郁，素洁光润，花语主要为忠贞、尊敬、清纯。',
+        origin: '印度'
+    },
+    {
+        id: '14',
+        name: '天堂鸟',
+        scientificName: 'Strelitzia reginae',
+        family: '旅人蕉科',
+        images: ['monstera_plant_1769757312755.png'],
+        category: '观叶',
+        tags: ['高大', '气派', 'ins风'],
+        difficulty: 'Medium',
+        description: '叶片宽大厚实，四季常青，是室内大型盆栽的优选。',
+        origin: '南非'
+    },
+    {
+        id: '15',
+        name: '芦荟',
+        scientificName: 'Aloe vera',
+        family: '阿福花科',
+        images: ['succulent_garden_1769757406309.png'],
+        category: '多肉',
+        tags: ['美容', '药用', '净化空气'],
+        difficulty: 'Easy',
+        description: '叶片肥厚多汁，含有丰富的胶质，具有一定的美容和药用价值。',
+        origin: '非洲'
+    },
+    {
+        id: '16',
+        name: '长寿花',
+        scientificName: 'Kalanchoe blossfeldiana',
+        family: '景天科',
+        images: ['garden_banner.png'],
+        category: '观花',
+        tags: ['花期超长', '吉祥', '好养'],
+        difficulty: 'Easy',
+        description: '叶片密集翠绿，花色丰富，花期可长达4-5个月。',
+        origin: '马达加斯加'
+    },
+    {
+        id: '17',
+        name: '玉露',
+        scientificName: 'Haworthia cooperi',
+        family: '阿福花科',
+        images: ['succulent_garden_1769757406309.png'],
+        category: '多肉',
+        tags: ['晶莹剔透', '窗窗', '小巧'],
+        difficulty: 'Medium',
+        description: '叶顶端有透明的"窗"，逆光观察如同有生命的工艺品。',
+        origin: '南非'
+    },
+    {
+        id: '18',
+        name: '君子兰',
+        scientificName: 'Clivia miniata',
+        family: '石蒜科',
+        images: ['garden_banner.png'],
+        category: '观花',
+        tags: ['富贵', '寿命长', '半阴'],
+        difficulty: 'Medium',
+        description: '叶片排列整齐，花色艳丽，果实红亮，具有很高的观赏价值。',
+        origin: '南非'
+    },
+    {
+        id: '19',
+        name: '豆瓣绿',
+        scientificName: 'Peperomia tetraphylla',
+        family: '胡椒科',
+        images: ['monstera_plant_1769757312755.png'],
+        category: '观叶',
+        tags: ['电脑伴侣', '护眼', '小清新'],
+        difficulty: 'Easy',
+        description: '叶片碧绿光亮，小巧可爱，适合摆放在办公桌案头。',
+        origin: '美洲热带'
+    },
+    {
+        id: '20',
+        name: '绣球花',
+        scientificName: 'Hydrangea macrophylla',
+        family: '绣球花科',
+        images: ['garden_banner.png'],
+        category: '观花',
+        tags: ['梦幻', '调色', '夏季'],
+        difficulty: 'Medium',
+        description: '花序硕大，花色随土壤酸碱度变化而变化，红蓝交相辉映。',
+        origin: '中国/日本'
     }
 ];