init: initial commit

2026-02-04 14:02:31 +08:00
commit 6ceda92e9d
2234 changed files with 38231 additions and 0 deletions
@@ -0,0 +1,228 @@
+// pages/garden/add/index.js
+import { MOCK_PLANTS, CARE_TASK_ICONS } from '../../../utils/mockData';
+
+Page({
+    data: {
+        newPlantName: '',
+        newPlantLocation: '',
+        newPlantDate: '',
+        newPlantImage: null,
+        isLocalImage: false,
+        newCareTasks: [],
+        scrollIntoViewId: '',
+
+        showActionSheet: false,
+        actionSheetItems: [
+            { label: '拍摄', value: 'camera' },
+            { label: '从手机相册选取', value: 'album' }
+        ],
+
+        // Icon picker
+        careTaskIcons: [],
+        showIconPicker: false,
+        currentEditingTaskId: null
+    },
+
+    onLoad() {
+        const now = new Date();
+        const year = now.getFullYear();
+        const month = (now.getMonth() + 1).toString().padStart(2, '0');
+        const day = now.getDate().toString().padStart(2, '0');
+
+        // Default care task with water icon
+        const defaultIcon = CARE_TASK_ICONS.find(i => i.id === 'water');
+
+        this.setData({
+            newPlantDate: `${year}-${month}-${day}`,
+            newCareTasks: [{
+                id: Date.now().toString(),
+                taskName: '浇水',
+                frequencyValue: 7,
+                frequencyUnit: 'day',
+                iconId: 'water',
+                taskIcon: defaultIcon
+            }],
+            careTaskIcons: CARE_TASK_ICONS
+        });
+    },
+
+    handleBack() {
+        wx.navigateBack();
+    },
+
+    // Action Sheet Logic
+    showActionSheet() {
+        this.setData({ showActionSheet: true });
+    },
+
+    onActionSheetCancel() {
+        this.setData({ showActionSheet: false });
+    },
+
+    onActionSheetSelected(e) {
+        const { value } = e.detail.selected;
+        this.handleImageUpload(value);
+        this.setData({ showActionSheet: false });
+    },
+
+    handleImageUpload(sourceType) {
+        wx.chooseMedia({
+            count: 1,
+            mediaType: ['image'],
+            sourceType: [sourceType], // 'camera' or 'album'
+            camera: 'back',
+            success: (res) => {
+                const tempFilePath = res.tempFiles[0].tempFilePath;
+                this.setData({
+                    newPlantImage: tempFilePath,
+                    isLocalImage: true
+                });
+            },
+            fail: (err) => {
+                console.log('User cancelled', err);
+            }
+        });
+    },
+
+    // Form Handlers
+    onNameInput(e) { this.setData({ newPlantName: e.detail.value }); },
+    onLocationInput(e) { this.setData({ newPlantLocation: e.detail.value }); },
+    onDateChange(e) { this.setData({ newPlantDate: e.detail.value }); },
+
+    handleAddCareTask() {
+        const tasks = this.data.newCareTasks;
+        const defaultIcon = CARE_TASK_ICONS.find(i => i.id === 'other');
+
+        tasks.push({
+            id: Date.now().toString(),
+            taskName: '',
+            frequencyValue: 1,
+            frequencyUnit: 'day',
+            iconId: 'other',
+            taskIcon: defaultIcon
+        });
+
+        // First clear the scrollIntoViewId, then set it to trigger scroll
+        this.setData({
+            newCareTasks: tasks,
+            scrollIntoViewId: ''
+        }, () => {
+            // Use setTimeout to ensure the DOM has updated before scrolling
+            setTimeout(() => {
+                this.setData({ scrollIntoViewId: 'care-list-bottom' });
+            }, 50);
+        });
+    },
+
+    handleRemoveCareTask(e) {
+        const id = e.currentTarget.dataset.id;
+        const tasks = this.data.newCareTasks.filter(t => t.id !== id);
+        this.setData({ newCareTasks: tasks });
+    },
+
+    onTaskNameInput(e) {
+        const { id } = e.currentTarget.dataset;
+        const tasks = this.data.newCareTasks.map(t => t.id === id ? { ...t, taskName: e.detail.value } : t);
+        this.setData({ newCareTasks: tasks });
+    },
+
+    onTaskFreqInput(e) {
+        const { id } = e.currentTarget.dataset;
+        const tasks = this.data.newCareTasks.map(t => t.id === id ? { ...t, frequencyValue: parseInt(e.detail.value) || 1 } : t);
+        this.setData({ newCareTasks: tasks });
+    },
+
+    // Icon Picker
+    showIconPickerForTask(e) {
+        const taskId = e.currentTarget.dataset.id;
+        this.setData({
+            showIconPicker: true,
+            currentEditingTaskId: taskId
+        });
+    },
+
+    hideIconPicker() {
+        this.setData({
+            showIconPicker: false,
+            currentEditingTaskId: null
+        });
+    },
+
+    selectIcon(e) {
+        const iconId = e.currentTarget.dataset.iconid;
+        const { currentEditingTaskId, careTaskIcons, newCareTasks } = this.data;
+
+        const selectedIcon = careTaskIcons.find(i => i.id === iconId);
+
+        if (selectedIcon && currentEditingTaskId) {
+            const updatedTasks = newCareTasks.map(t => {
+                if (t.id === currentEditingTaskId) {
+                    return {
+                        ...t,
+                        iconId: iconId,
+                        taskIcon: selectedIcon,
+                        // Auto-fill task name if empty
+                        taskName: t.taskName || selectedIcon.name
+                    };
+                }
+                return t;
+            });
+
+            this.setData({
+                newCareTasks: updatedTasks,
+                showIconPicker: false,
+                currentEditingTaskId: null
+            });
+        }
+    },
+
+    handleAddPlant() {
+        if (!this.data.newPlantName) {
+            wx.showToast({ title: '请输入植物名称', icon: 'none' });
+            return;
+        }
+
+        const newId = (MOCK_PLANTS.length + 1).toString();
+        const adoption = new Date(this.data.newPlantDate);
+        const today = new Date();
+        const diffTime = Math.abs(today.getTime() - adoption.getTime());
+        const daysPlanted = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+        // Prepare care schedule with icon info
+        const careSchedule = this.data.newCareTasks.map(task => ({
+            id: task.id,
+            taskName: task.taskName,
+            frequencyValue: task.frequencyValue,
+            frequencyUnit: task.frequencyUnit,
+            iconId: task.iconId,
+            taskIcon: task.taskIcon
+        }));
+
+        const newPlant = {
+            id: newId,
+            name: this.data.newPlantName,
+            images: [this.data.newPlantImage || 'monstera_plant_1769757312755.png'],
+            daysPlanted: daysPlanted,
+            adoptionDate: this.data.newPlantDate,
+            location: this.data.newPlantLocation || '未分配位置',
+            scientificName: 'Unknown',
+            family: '未知科',
+            genus: '未知属',
+            description: '新添加的植物...',
+            difficulty: '⭐️',
+            toxicity: '未知',
+            flowerMsg: '充满希望',
+            careSchedule: careSchedule
+        };
+
+        // In a real app we would call an API or update global store
+        // For this mock, we append to the imported array (memory only)
+        MOCK_PLANTS.push(newPlant);
+
+        wx.showToast({ title: '添加成功', icon: 'success' });
+
+        setTimeout(() => {
+            wx.navigateBack();
+        }, 1000);
+    }
+})
@@ -0,0 +1,13 @@
+{
+    "navigationBarTitleText": "添加新植物",
+    "navigationBarBackgroundColor": "#FFFFFF",
+    "usingComponents": {
+        "t-input": "tdesign-miniprogram/input/input",
+        "t-button": "tdesign-miniprogram/button/button",
+        "t-icon": "tdesign-miniprogram/icon/icon",
+        "t-image": "tdesign-miniprogram/image/image",
+        "t-cell": "tdesign-miniprogram/cell/cell",
+        "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
+        "t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet"
+    }
+}
@@ -0,0 +1,135 @@
+<wxs src="../../../utils/tools.wxs" module="tools" />
+<view class="add-plant-page">
+    <scroll-view 
+        scroll-y 
+        class="page-content" 
+        show-scrollbar="{{false}}" 
+        enhanced="{{true}}"
+        scroll-into-view="{{scrollIntoViewId}}"
+        scroll-with-animation="{{true}}"
+    >
+        <!-- Upload Area -->
+        <view class="upload-section">
+            <view class="image-upload-area {{newPlantImage ? 'has-image' : ''}}" bindtap="showActionSheet">
+                <t-image wx:if="{{newPlantImage}}" src="{{tools.resolvePath(newPlantImage)}}" mode="aspectFill" width="100%" height="100%" />
+                <view wx:else class="upload-placeholder">
+                    <t-icon name="upload" size="64rpx" color="#999" />
+                    <text>点击上传封面图</text>
+                </view>
+            </view>
+        </view>
+
+        <!-- Form Fields -->
+        <view class="form-group">
+            <text class="field-label">植物昵称</text>
+            <view class="custom-input-box">
+                <input class="native-input" placeholder="例如：小绿、旺财" placeholder-class="input-placeholder" value="{{newPlantName}}" bindinput="onNameInput" />
+            </view>
+        </view>
+        
+        <view class="form-group">
+            <text class="field-label">摆放位置</text>
+            <view class="custom-input-box">
+                <input class="native-input" placeholder="例如：客厅、卧室" placeholder-class="input-placeholder" value="{{newPlantLocation}}" bindinput="onLocationInput" />
+            </view>
+        </view>
+        
+        <view class="form-group">
+            <text class="field-label">入家日期</text>
+            <picker mode="date" value="{{newPlantDate}}" bindchange="onDateChange">
+                <view class="custom-input-box picker-box">
+                    <text class="picker-text">{{newPlantDate}}</text>
+                    <t-icon name="calendar" size="40rpx" color="#666" />
+                </view>
+            </picker>
+        </view>
+
+        <!-- Care Plan -->
+        <view class="care-section-group">
+            <view class="section-header-row">
+                <text class="field-label" style="margin-bottom: 0;">养护计划</text>
+                <view class="add-task-btn-small" bindtap="handleAddCareTask">
+                    <t-icon name="add" size="28rpx" />
+                    <text>添加</text>
+                </view>
+            </view>
+            
+            <view class="care-list-styled">
+                <view wx:for="{{newCareTasks}}" wx:key="id" class="care-row-styled">
+                    <!-- Icon Selector -->
+                    <view 
+                        class="care-icon-btn" 
+                        bindtap="showIconPickerForTask" 
+                        data-id="{{item.id}}" 
+                        style="background: {{item.taskIcon ? item.taskIcon.bgColor : '#f5f5f5'}};"
+                    >
+                        <t-icon 
+                            name="{{item.taskIcon ? item.taskIcon.icon : 'ellipsis'}}" 
+                            size="40rpx" 
+                            color="{{item.taskIcon ? item.taskIcon.color : '#999'}}" 
+                        />
+                    </view>
+                    
+                    <view class="care-input-col task-col">
+                        <view class="custom-input-box small-box">
+                            <input class="native-input" placeholder="事项名称" value="{{item.taskName}}" bindinput="onTaskNameInput" data-id="{{item.id}}" />
+                        </view>
+                    </view>
+                    <view class="care-input-col freq-col">
+                        <view class="custom-input-box small-box flex-row">
+                            <input type="number" class="native-input center-text" style="width: 50rpx;" value="{{item.frequencyValue}}" bindinput="onTaskFreqInput" data-id="{{item.id}}" />
+                            <text class="suffix-text">天</text>
+                        </view>
+                    </view>
+                    <view class="delete-btn-pink" bindtap="handleRemoveCareTask" data-id="{{item.id}}">
+                        <t-icon name="delete" size="36rpx" />
+                    </view>
+                </view>
+            </view>
+            
+            <!-- Scroll anchor for newly added care items -->
+            <view id="care-list-bottom"></view>
+        </view>
+        
+        <!-- Spacer for bottom button -->
+        <view style="height: 180rpx;"></view>
+    </scroll-view>
+
+    <view class="page-footer">
+        <t-button theme="primary" block size="large" icon="check" shape="round" bind:tap="handleAddPlant">确认添加</t-button>
+    </view>
+
+    <t-action-sheet 
+        visible="{{showActionSheet}}" 
+        description="请选择图片来源"
+        items="{{actionSheetItems}}" 
+        bind:selected="onActionSheetSelected" 
+        bind:cancel="onActionSheetCancel"
+        show-cancel="{{true}}"
+    />
+
+    <!-- Icon Picker Popup -->
+    <view class="icon-picker-mask {{showIconPicker ? 'show' : ''}}" bindtap="hideIconPicker"></view>
+    <view class="icon-picker-popup {{showIconPicker ? 'show' : ''}}">
+        <view class="icon-picker-header">
+            <text class="icon-picker-title">选择图标</text>
+            <view class="icon-picker-close" bindtap="hideIconPicker">
+                <t-icon name="close" size="40rpx" color="#999" />
+            </view>
+        </view>
+        <view class="icon-picker-grid">
+            <view 
+                wx:for="{{careTaskIcons}}" 
+                wx:key="id" 
+                class="icon-picker-item" 
+                bindtap="selectIcon" 
+                data-iconid="{{item.id}}"
+            >
+                <view class="icon-circle" style="background: {{item.bgColor}};">
+                    <t-icon name="{{item.icon}}" size="48rpx" color="{{item.color}}" />
+                </view>
+                <text class="icon-name">{{item.name}}</text>
+            </view>
+        </view>
+    </view>
+</view>
@@ -0,0 +1,336 @@
+/** pages/garden/add/index.wxss **/
+page {
+    height: 100%;
+    overflow: hidden;
+}
+
+.add-plant-page {
+    background-color: #FFFFFF;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.page-content {
+    height: calc(100vh - 140rpx - env(safe-area-inset-bottom));
+    padding: 32rpx 40rpx;
+    background: #FFFFFF;
+    box-sizing: border-box;
+}
+
+/* Hide scrollbar - multiple approaches for compatibility */
+.page-content::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+    background: transparent !important;
+}
+
+/* For scroll-view component */
+::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+}
+
+scroll-view ::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+}
+
+/* Upload Section */
+.upload-section {
+    margin: 0 0 40rpx;
+    display: flex;
+    justify-content: center;
+}
+
+.image-upload-area {
+    width: 100%;
+    height: 240rpx;
+    border-radius: 32rpx;
+    border: 4rpx dashed #ddd; /* Match prototype dashed border */
+    background: #fafafa;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.2s;
+}
+
+.image-upload-area:active {
+    border-color: #558B2F; /* var(--primary) */
+    background: #F1F8E9;
+}
+
+.image-upload-area.has-image {
+    border: none;
+    height: 360rpx; /* Taller when has image */
+}
+
+.upload-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16rpx;
+}
+
+.upload-placeholder text {
+    color: #BDBDBD;
+    font-size: 26rpx;
+}
+
+/* Form Styles */
+.form-group {
+    margin-bottom: 40rpx;
+}
+
+.field-label {
+    display: block;
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #263238;
+    margin-bottom: 16rpx;
+}
+
+.custom-input-box {
+    background: #f9f9f9;
+    border: 2rpx solid #e0e0e0;
+    border-radius: 24rpx;
+    padding: 24rpx 32rpx;
+    color: #263238;
+    font-size: 30rpx;
+    transition: all 0.2s;
+}
+
+.custom-input-box:active, .custom-input-box:focus-within {
+    background: #FFFFFF;
+    border-color: #558B2F;
+}
+
+.input-placeholder {
+    color: #999;
+}
+
+.native-input {
+    width: 100%;
+    height: 100%;
+}
+
+.picker-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/* Care Section */
+.care-section-group {
+    margin-top: 24rpx;
+    margin-bottom: 48rpx;
+}
+
+.section-header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24rpx;
+}
+
+.add-task-btn-small {
+    font-size: 26rpx;
+    color: #558B2F;
+    background: #F1F8E9;
+    border: 2rpx dashed #558B2F;
+    padding: 12rpx 20rpx;
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+}
+
+.care-list-styled {
+    display: flex;
+    flex-direction: column;
+    gap: 24rpx;
+}
+
+.care-row-styled {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+}
+
+.care-input-col.task-col {
+    flex: 1;
+}
+
+.care-input-col.freq-col {
+    flex-shrink: 0;
+}
+
+.small-box {
+    padding: 24rpx;
+    background: #f9f9f9;
+}
+
+.flex-row {
+    display: flex;
+    align-items: center;
+    padding-right: 20rpx;
+}
+
+.center-text {
+    text-align: center;
+}
+
+.suffix-text {
+    color: #888;
+    font-size: 28rpx;
+    font-weight: 500;
+}
+
+.delete-btn-pink {
+    width: 84rpx; 
+    height: 84rpx;
+    background: #FFEBEE;
+    border-radius: 24rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #EF5350;
+    flex-shrink: 0;
+}
+
+/* Footer */
+.page-footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 32rpx 40rpx calc(32rpx + env(safe-area-inset-bottom));
+    background: white;
+    z-index: 100;
+    box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.02);
+}
+
+/* Footer Button */
+.page-footer t-button {
+    --td-button-font-weight: 600;
+    --td-button-primary-bg-color: #558B2F;
+    --td-button-primary-border-color: #558B2F;
+    box-shadow: 0 8rpx 32rpx rgba(85, 139, 47, 0.3);
+}
+
+/* Care Icon Button */
+.care-icon-btn {
+    width: 84rpx;
+    height: 84rpx;
+    border-radius: 24rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: all 0.2s;
+}
+
+.care-icon-btn:active {
+    transform: scale(0.95);
+}
+
+/* Icon Picker Popup */
+.icon-picker-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s;
+}
+
+.icon-picker-mask.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+.icon-picker-popup {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    border-radius: 32rpx 32rpx 0 0;
+    z-index: 1001;
+    transform: translateY(100%);
+    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
+.icon-picker-popup.show {
+    transform: translateY(0);
+}
+
+.icon-picker-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 32rpx 40rpx;
+    border-bottom: 2rpx solid #f5f5f5;
+}
+
+.icon-picker-title {
+    font-size: 34rpx;
+    font-weight: 600;
+    color: #333;
+}
+
+.icon-picker-close {
+    width: 64rpx;
+    height: 64rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.icon-picker-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 24rpx;
+    padding: 32rpx 40rpx;
+    max-height: 60vh;
+    overflow-y: auto;
+}
+
+.icon-picker-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12rpx;
+    padding: 20rpx 0;
+}
+
+.icon-picker-item:active {
+    opacity: 0.7;
+}
+
+.icon-circle {
+    width: 96rpx;
+    height: 96rpx;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.icon-name {
+    font-size: 24rpx;
+    color: #666;
+}