feat:更新朋友圈表单组件

lib/layout/nav_bar.dart

@@ -117,7 +117,7 @@ void _handleAddRecord(BuildContext context, FoodProvider provider) {
 }
 
 void _handleAddMoment(BuildContext context, FoodProvider provider) {
-  provider.resetRecordForm();
+  provider.resetMomentForm();
   provider.isEditing = false;
   Navigator.pop(context);
   Navigator.pushNamed(context, "/momentForm");

lib/views/moment_form.dart

@@ -6,7 +6,6 @@ import 'package:food_hub_app/utils/minio_utils.dart';
 import 'package:food_hub_app/widgets/common/form.dart';
 import 'package:food_hub_app/widgets/common/image.dart';
 import 'package:food_hub_app/widgets/common/index.dart';
-
 import 'package:provider/provider.dart';
 
 class MomentFormPage extends StatefulWidget {
@@ -20,6 +19,78 @@ class _MomentFormPageState extends State<MomentFormPage> {
   final _formKey = GlobalKey<FormBuilderState>();
   final _focusNode = FocusNode();
   static const String _contentField = 'content';
+  static const int maxContentLength = 200;
+  static const int maxImageCount = 9; // 最大图片数量
+
+  Widget _buildContentField() {
+    return FormBuilderTextField(
+      name: _contentField,
+      focusNode: _focusNode,
+      maxLines: 5,
+      minLines: 3,
+      maxLength: maxContentLength,
+      buildCounter: (
+        context, {
+        required currentLength,
+        required isFocused,
+        maxLength,
+      }) {
+        return Text(
+          '$currentLength/$maxContentLength',
+          style: TextStyle(
+            color:
+                currentLength > maxLength!
+                    ? Colors.red
+                    : Theme.of(context).colorScheme.primary,
+          ),
+        );
+      },
+      onChanged: (value) {
+        setState(() {
+          // provider.momentFormItem.content = value!;
+        });
+      },
+      decoration: buildInputDecoration(context: context, hintText: '请输入朋友圈内容'),
+      validator: (value) {
+        if (value == null || value.isEmpty) {
+          return '请输入朋友圈内容';
+        }
+        if (value.length > maxContentLength) {
+          // 修正为使用 maxContentLength
+          return '内容不能超过${maxContentLength}字';
+        }
+        return null;
+      },
+    );
+  }
+
+  Widget _buildImageGrid(FoodProvider provider) {
+    final imageUrls = provider.momentFormItem.imageList;
+
+    return Wrap(
+      spacing: 8,
+      runSpacing: 8,
+      children: [
+        ...imageUrls.asMap().entries.map((entry) {
+          final index = entry.key;
+          final imageUrl = entry.value;
+          return Stack(
+            children: [
+              buildImagePreviewItem(
+                context: context,
+                imageUrls: imageUrls,
+                index: index,
+                onRemoveImage: () => _removeImage(provider, index),
+              )
+            ],
+          );
+        }),
+        // 上传按钮（如果还有剩余位置）
+        if (imageUrls.length < maxImageCount)
+          buildImageUploadButton(onPickImage: () => _pickImages(provider)),
+      ],
+    );
+  }
 
   Widget _buildFormBuilder() {
     final provider = context.watch<FoodProvider>();
@@ -29,53 +100,16 @@ class _MomentFormPageState extends State<MomentFormPage> {
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          buildFormLabel('内容', required: true),
+          buildFormLabel('朋友圈内容', required: true),
           const SizedBox(height: 8),
-          FormBuilderTextField(
+          _buildContentField(),
-            name: _contentField,
+          const SizedBox(height: 20),
-            focusNode: _focusNode,
-            onChanged: (value) {
-              setState(() {
-                // provider.momentFormItem.content = value!;
-              });
-            },
-            decoration: buildInputDecoration(
-              context: context,
-              hintText: '请输入朋友圈内容',
-              prefixIcon: const Icon(
-                Icons.title,
-                size: 20,
-                color: Color(0xFF86909C),
-              ),
-            ),
-            validator: (value) {
-              if (value == null || value.isEmpty) {
-                return '请输入菜谱名称';
-              }
-              return null;
-            },
-          ),
-
-          const SizedBox(height: 10),
 
           buildFormLabel('上传图片', required: true),
           const SizedBox(height: 10),
-          Column(
+          _buildImageGrid(provider),
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              if (provider.recordFormItem.imageUrl.isEmpty)
-                buildImageUploadButton(onPickImage: () => _pickImage(provider))
-              else
-                buildImagePreviewItem(
-                  context: context,
-                  imageUrls: [provider.recordFormItem.imageUrl],
-                  index: 0,
-                  onRemoveImage: () => _removeImage(provider),
-                ),
-            ],
-          ),
 
-          const SizedBox(height: 10),
+          const SizedBox(height: 20),
           buildFormButtonGroup(
             context: context,
             onConfirm: () => _submitForm(provider),
@@ -85,41 +119,63 @@ class _MomentFormPageState extends State<MomentFormPage> {
     );
   }
 
-  /// 选择图片（限制单张）
+  /// 选择多张图片
-  Future<void> _pickImage(FoodProvider provider) async {
+  Future<void> _pickImages(FoodProvider provider) async {
+    final currentCount = provider.momentFormItem.imageList.length;
+    final remainingCount = maxImageCount - currentCount;
+
+    if (remainingCount <= 0) {
+      showErrorToast('最多只能上传$maxImageCount张图片');
+      return;
+    }
+
     FilePickerResult? result = await FilePicker.platform.pickFiles(
       type: FileType.custom,
       allowedExtensions: ['jpg', 'jpeg', 'png'],
-      allowMultiple: false,
+      allowMultiple: true,
     );
 
     if (result != null) {
-      PlatformFile file = result.files.first;
+      // 限制选择数量
-      final fileName = await MinIOHelper().uploadFile(file: file);
+      final filesToUpload = result.files.take(remainingCount).toList();
-      setState(() {
+
-        provider.recordFormItem.imageUrl = fileName;
+      // 显示加载提示
-      });
+      // showLoadingToast('正在上传图片...');
+
+      try {
+        final newImageUrls = <String>[];
+
+        // 逐个上传图片
+        for (final file in filesToUpload) {
+          final fileName = await MinIOHelper().uploadFile(file: file);
+          newImageUrls.add(fileName);
+        }
+
+        // 更新图片列表
+        setState(() {
+          provider.momentFormItem.imageList.addAll(newImageUrls);
+        });
+
+        showSuccessToast('图片上传成功');
+      } catch (e) {
+        showErrorToast('图片上传失败');
+      }
     }
   }
 
-  /// 移除图片
+  /// 移除单张图片
-  void _removeImage(FoodProvider provider) {
+  void _removeImage(FoodProvider provider, int index) {
     setState(() {
-      provider.recordFormItem.imageUrl = '';
+      provider.momentFormItem.imageList.removeAt(index);
     });
   }
 
   /// 提交表单
   void _submitForm(FoodProvider provider) {
     if (_formKey.currentState?.saveAndValidate() ?? false) {
-      if (provider.recordFormItem.imageUrl.isEmpty) {
+      // 这里处理表单提交逻辑
-        showErrorToast('请上传图片');
+      // print('提交内容: ${_formKey.currentState?.value[_contentField]}');
-        return;
+      // print('图片列表: ${provider.recordFormItem.imageUrls}');
-      }
-
-      print(provider.recordFormItem.name);
-      print(provider.recordFormItem.date);
-      print(provider.recordFormItem.imageUrl);
     }
   }
 
@@ -132,7 +188,7 @@ class _MomentFormPageState extends State<MomentFormPage> {
 
     return Scaffold(
       appBar: AppBar(
-        title: Text(title, style: TextStyle(color: Colors.white)),
+        title: Text(title, style: const TextStyle(color: Colors.white)),
         backgroundColor: colors.primary,
         leading: IconButton(
           icon: const Icon(Icons.arrow_back, color: Colors.white),
@@ -142,7 +198,7 @@ class _MomentFormPageState extends State<MomentFormPage> {
       backgroundColor: const Color(0xFFF5F5F5),
       body: SingleChildScrollView(
         child: Padding(
-          padding: EdgeInsets.all(5),
+          padding: const EdgeInsets.all(10),
           child: BuildCard(child: _buildFormBuilder()),
         ),
       ),