feat(article): 文章图片列表改为网格布局

- 移除横向滚动视图
- 使用 flex-wrap 实现网格布局
- 每行显示3张图片，自动换行
- 所有图片可一次性查看完成

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

@@ -48,18 +48,16 @@
         <!-- 文章图片列表（点击可预览） -->
         <view v-if="imageUrls.length > 0" class="article-images-section px-[32rpx] pb-[32rpx]">
           <view class="section-title">文章图片</view>
-          <scroll-view scroll-x class="image-scroll-view">
-            <view class="image-list">
-              <view
-                v-for="(url, index) in imageUrls"
-                :key="index"
-                class="image-item"
-                @tap="previewImage(url)"
-              >
-                <image :src="url" mode="aspectFill" class="thumbnail-image" />
-              </view>
+          <view class="image-grid">
+            <view
+              v-for="(url, index) in imageUrls"
+              :key="index"
+              class="image-item"
+              @tap="previewImage(url)"
+            >
+              <image :src="url" mode="aspectFill" class="thumbnail-image" />
             </view>
-          </scroll-view>
+          </view>
         </view>
       </view>
 
@@ -503,7 +501,7 @@ useLoad((options) => {
   min-height: 400rpx;
 }
 
-/* 文章图片列表区域 */
+/* 文章图片列表区域 - 网格布局 */
 .article-images-section {
   margin-top: 24rpx;
 }
@@ -515,19 +513,18 @@ useLoad((options) => {
   margin-bottom: 16rpx;
 }
 
-.image-scroll-view {
-  white-space: nowrap;
-}
-
-.image-list {
-  display: inline-flex;
+.image-grid {
+  display: flex;
+  flex-wrap: wrap;
   gap: 16rpx;
+  /* 每行3个图片：计算公式：(750rpx - 64rpx padding - 32rpx gaps) / 3 ≈ 218rpx */
 }
 
 .image-item {
-  flex-shrink: 0;
-  width: 160rpx;
-  height: 160rpx;
+  /* 每行3个，宽度约占 1/3 */
+  width: calc((100% - 32rpx) / 3);
+  /* 保持正方形 */
+  aspect-ratio: 1;
   border-radius: 12rpx;
   overflow: hidden;
   background-color: #F3F4F6;