From eb8ab4af75710ac5d34de9fd1ecb6d10601b02d0 Mon Sep 17 00:00:00 2001
From: hajimi <phperbylyh@163.com>
Date: Mon, 3 Aug 2026 17:33:43 +0800
Subject: [PATCH] style: move community category selector to top

---
 docs/业务进度管理.md                          |   2 +-
 .../src/packages_community/pages/publish.vue  | 117 ++++++++++--------
 2 files changed, 66 insertions(+), 53 deletions(-)

diff --git a/docs/业务进度管理.md b/docs/业务进度管理.md
index c8fc9855..624f9f11 100644
--- a/docs/业务进度管理.md
+++ b/docs/业务进度管理.md
@@ -19,7 +19,7 @@
 
 完成内容：
 
-- 发帖页新增必选分类卡片，读取后台启用的社区分类并将分类 ID 一同提交；分类每行固定四列，仅显示名称，过长文字以省略号隐藏。
+- 发帖页首行新增必选分类下拉选择器，读取后台启用的社区分类并将分类 ID 一同提交；分类名称过长时以省略号隐藏。
 - 标签区域明确支持多选，展示已选数量，并限制最多选择 3 个标签。
 - 发布接口校验分类与标签的启用状态，写入帖子分类并同步更新分类、标签的帖子计数。
 
diff --git a/uniapp/src/packages_community/pages/publish.vue b/uniapp/src/packages_community/pages/publish.vue
index 4993e7de..356e9229 100644
--- a/uniapp/src/packages_community/pages/publish.vue
+++ b/uniapp/src/packages_community/pages/publish.vue
@@ -13,6 +13,19 @@
 
         <scroll-view scroll-y class="publish-scroll" :style="{ height: scrollHeight + 'px' }">
             <view class="publish-body">
+                <view class="publish-category-select">
+                    <view class="publish-category-select__label">
+                        <text>分类</text>
+                        <text class="publish-category-select__required">必选</text>
+                    </view>
+                    <picker class="publish-category-select__picker" mode="selector" :range="categoryList" range-key="name"
+                        :value="selectedCategoryIndex" @change="handleCategoryChange">
+                        <view class="publish-category-select__value" :class="{ 'publish-category-select__value--placeholder': !selectedCategory }">
+                            <text>{{ selectedCategoryName || '请选择帖子分类' }}</text>
+                            <u-icon name="arrow-down" size="24" :color="selectedCategory ? '#185dff' : '#9aa3b2'" />
+                        </view>
+                    </picker>
+                </view>
                 <textarea v-model="form.content" class="publish-textarea" placeholder="分享你的体育见解..." :maxlength="2000"
                     auto-height />
 
@@ -48,24 +61,6 @@
                 </view>
             </view>
 
-            <view class="publish-category">
-                <view class="publish-section__head">
-                    <view class="publish-section__title-wrap">
-                        <text class="publish-section__title">选择分类</text>
-                        <text class="publish-section__required">必选</text>
-                    </view>
-                    <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"
-                        :class="{ 'publish-category__item--active': selectedCategory === category.id }"
-                        @tap="selectCategory(category.id)">
-                        <text class="publish-category__name">{{ category.name }}</text>
-                    </view>
-                </view>
-                <text v-else class="publish-section__empty">暂无可选分类</text>
-            </view>
-
             <view class="publish-tags">
                 <view class="publish-section__head">
                     <view class="publish-section__title-wrap">
@@ -99,6 +94,8 @@ const tagList = ref<any[]>([])
 const selectedTags = ref<number[]>([])
 const categoryList = ref<any[]>([])
 const selectedCategory = ref(0)
+const selectedCategoryIndex = computed(() => Math.max(categoryList.value.findIndex((item) => Number(item.id) === selectedCategory.value), 0))
+const selectedCategoryName = computed(() => categoryList.value.find((item) => Number(item.id) === selectedCategory.value)?.name || '')
 
 const isPaid = ref(false)
 const pricePoints = ref('')
@@ -216,8 +213,9 @@ const removeImage = (idx: number) => {
     form.images.splice(idx, 1)
 }
 
-const selectCategory = (id: number) => {
-    selectedCategory.value = id
+const handleCategoryChange = (event: any) => {
+    const category = categoryList.value[Number(event.detail.value)]
+    selectedCategory.value = Number(category?.id) || 0
 }
 
 const toggleTag = (id: number) => {
@@ -453,46 +451,61 @@ const toggleTag = (id: number) => {
     font-size: 22rpx;
 }
 
-.publish-category {
-    padding: 24rpx 30rpx;
-    border-top: 16rpx solid #f5f5f5;
+.publish-category-select {
+    display: flex;
+    align-items: center;
+    height: 76rpx;
+    margin-bottom: 20rpx;
+    padding: 0 20rpx;
+    border: 2rpx solid #e5eaf2;
+    border-radius: 14rpx;
+    background: #fafcff;
 
-    &__list {
-        display: grid;
-        grid-template-columns: repeat(4, minmax(0, 1fr));
-        gap: 16rpx;
-    }
-
-    &__item {
+    &__label {
         display: flex;
         align-items: center;
-        justify-content: center;
-        min-width: 0;
-        height: 76rpx;
-        box-sizing: border-box;
-        padding: 0 8rpx;
-        border: 2rpx solid #edf0f5;
-        border-radius: 14rpx;
-        background: #fafbfc;
-
-        &--active {
-            border-color: #185dff;
-            background: #eef4ff;
-
-            .publish-category__name {
-                color: #185dff;
-                font-weight: 600;
-            }
-
-        }
+        gap: 8rpx;
+        color: #303846;
+        font-size: 27rpx;
+        font-weight: 600;
+        white-space: nowrap;
     }
 
-    &__name {
+    &__required {
+        padding: 3rpx 8rpx;
+        border-radius: 8rpx;
+        background: #fff1f2;
+        color: #ef4444;
+        font-size: 19rpx;
+        font-weight: 400;
+    }
+
+    &__picker {
+        flex: 1;
+        min-width: 0;
+        margin-left: 24rpx;
+    }
+
+    &__value {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 10rpx;
         overflow: hidden;
-        color: #4b5563;
-        font-size: 25rpx;
+        color: #185dff;
+        font-size: 26rpx;
         text-overflow: ellipsis;
         white-space: nowrap;
+
+        text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &--placeholder {
+            color: #9aa3b2;
+        }
     }
 }