style: compact community category selector

docs/业务进度管理.md

@@ -19,7 +19,7 @@
 
 完成内容：
 
-- 发帖页新增必选分类卡片，读取后台启用的社区分类并将分类 ID 一同提交。
+- 发帖页新增必选分类卡片，读取后台启用的社区分类并将分类 ID 一同提交；分类固定一行四列，仅显示名称，超出部分隐藏。
 - 标签区域明确支持多选，展示已选数量，并限制最多选择 3 个标签。
 - 发布接口校验分类与标签的启用状态，写入帖子分类并同步更新分类、标签的帖子计数。
 

uniapp/src/packages_community/pages/publish.vue

@@ -57,15 +57,10 @@
                     <text class="publish-section__hint">{{ selectedCategory ? '已选择 1 个分类' : '请选择帖子所属分类' }}</text>
                 </view>
                 <view v-if="categoryList.length" class="publish-category__list">
-                    <view v-for="category in categoryList" :key="category.id" class="publish-category__item"
+                    <view v-for="category in visibleCategories" :key="category.id" class="publish-category__item"
                         :class="{ 'publish-category__item--active': selectedCategory === category.id }"
                         @tap="selectCategory(category.id)">
-                        <image v-if="category.icon" :src="category.icon" class="publish-category__icon" mode="aspectFit" />
-                        <view v-else class="publish-category__icon publish-category__icon--fallback">
-                            <text>{{ category.name.slice(0, 1) }}</text>
-                        </view>
                         <text class="publish-category__name">{{ category.name }}</text>
-                        <u-icon v-if="selectedCategory === category.id" name="checkmark" size="22" color="#fff" />
                     </view>
                 </view>
                 <text v-else class="publish-section__empty">暂无可选分类</text>
@@ -104,6 +99,7 @@ const tagList = ref<any[]>([])
 const selectedTags = ref<number[]>([])
 const categoryList = ref<any[]>([])
 const selectedCategory = ref(0)
+const visibleCategories = computed(() => categoryList.value.slice(0, 4))
 
 const isPaid = ref(false)
 const pricePoints = ref('')
@@ -463,21 +459,21 @@ const toggleTag = (id: number) => {
     border-top: 16rpx solid #f5f5f5;
 
     &__list {
-        display: flex;
-        flex-wrap: wrap;
+        display: grid;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
         gap: 16rpx;
+        max-height: 76rpx;
+        overflow: hidden;
     }
 
     &__item {
-        position: relative;
         display: flex;
         align-items: center;
-        min-width: calc((100% - 16rpx) / 2);
-        max-width: 100%;
+        justify-content: center;
+        min-width: 0;
         height: 76rpx;
         box-sizing: border-box;
-        padding: 0 20rpx;
-        gap: 12rpx;
+        padding: 0 8rpx;
         border: 2rpx solid #edf0f5;
         border-radius: 14rpx;
         background: #fafbfc;
@@ -491,43 +487,6 @@ const toggleTag = (id: number) => {
                 font-weight: 600;
             }
 
-            &::after {
-                position: absolute;
-                top: 0;
-                right: 0;
-                width: 34rpx;
-                height: 34rpx;
-                border-radius: 0 10rpx 0 12rpx;
-                background: #185dff;
-                content: '';
-            }
-
-            .u-icon {
-                position: absolute;
-                top: 2rpx;
-                right: 3rpx;
-                z-index: 1;
-            }
-        }
-    }
-
-    &__icon {
-        width: 40rpx;
-        height: 40rpx;
-        border-radius: 50%;
-        flex-shrink: 0;
-
-        &--fallback {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: #dbe8ff;
-
-            text {
-                color: #185dff;
-                font-size: 20rpx;
-                font-weight: 700;
-            }
         }
     }