update

src/views/community/CommunitySetDetail.vue

@@ -70,7 +70,8 @@
       
       <div v-else-if="searchResults.length > 0" class="search-results">
         <div class="search-title">搜索结果：</div>
-        <a-radio-group v-model:value="selectedCommunityId">
+        <div class="search-subtitle">请选择一个小区进行关联：</div>
+        <a-radio-group v-model:value="selectedCommunityId" class="community-radio-group">
           <div v-for="community in searchResults" :key="community.id" class="search-item">
             <a-radio :value="community.id">
               <div class="community-info">
@@ -82,12 +83,20 @@
         </a-radio-group>
         
         <div class="search-actions">
-          <a-button type="primary" :disabled="!selectedCommunityId" :loading="submitting" @click="handleAddCommunity">
+          <div class="selection-status" v-if="selectedCommunityId">
-            确认添加
+            已选择: {{ getSelectedCommunityName() }}
-          </a-button>
+          </div>
-          <a-button style="margin-left: 8px;" @click="handleCancelAdd">
+          <div class="selection-status selection-warning" v-else>
-            取消
+            <a-alert type="warning" message="请选择一个小区" banner />
-          </a-button>
+          </div>
+          <div class="action-buttons">
+            <a-button type="primary" :disabled="!selectedCommunityId" :loading="submitting" @click="handleAddCommunity">
+              确认添加
+            </a-button>
+            <a-button style="margin-left: 8px;" @click="handleCancelAdd">
+              取消
+            </a-button>
+          </div>
         </div>
       </div>
       
@@ -105,7 +114,7 @@
 <script>
 import { defineComponent, ref, reactive, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { message, Modal, Table, Tag, Spin, Empty, Divider } from 'ant-design-vue'
+import { message, Modal, Table, Tag, Spin, Empty, Divider, Radio, Alert } from 'ant-design-vue'
 import request from '@/utils/request'
 import PageContainer from '@/components/PageContainer.vue'
 
@@ -116,7 +125,10 @@ export default defineComponent({
     ATag: Tag,
     ASpin: Spin,
     AEmpty: Empty,
-    ADivider: Divider
+    ADivider: Divider,
+    ARadio: Radio,
+    ARadioGroup: Radio.Group,
+    AAlert: Alert
   },
   setup() {
     const route = useRoute()
@@ -264,9 +276,8 @@ export default defineComponent({
         const res = await request.get(`/api/community/search_by_name/${searchValue.value}`)
         if (res.code === 200) {
           searchResults.value = res.data || []
-          if (searchResults.value.length > 0) {
+          // 不自动选择第一个，让用户手动选择
-            selectedCommunityId.value = searchResults.value[0].id
+          selectedCommunityId.value = null
-          }
         } else {
           message.warning(res.message || '搜索小区失败')
           searchResults.value = []
@@ -280,6 +291,13 @@ export default defineComponent({
       }
     }
     
+    // 获取选中的小区名称
+    const getSelectedCommunityName = () => {
+      if (!selectedCommunityId.value) return ''
+      const selected = searchResults.value.find(item => item.id === selectedCommunityId.value)
+      return selected ? selected.name : ''
+    }
+    
     // 添加小区
     const handleAddCommunity = async () => {
       if (!selectedCommunityId.value) {
@@ -361,7 +379,8 @@ export default defineComponent({
       handleAddCommunity,
       handleCancelAdd,
       handleRemoveCommunity,
-      handleTableChange
+      handleTableChange,
+      getSelectedCommunityName
     }
   }
 })
@@ -453,8 +472,13 @@ export default defineComponent({
 }
 
 .search-item {
-  padding: 8px 0;
+  padding: 12px;
   border-bottom: 1px solid #f0f0f0;
+  transition: background-color 0.3s;
+}
+
+.search-item:hover {
+  background-color: #f5f5f5;
 }
 
 .search-item:last-child {
@@ -485,13 +509,37 @@ export default defineComponent({
   margin-bottom: 12px;
 }
 
+.search-subtitle {
+  color: #666;
+  margin-bottom: 12px;
+  font-size: 13px;
+}
+
+.community-radio-group {
+  display: block;
+  width: 100%;
+}
+
 .search-actions {
   margin-top: 16px;
-  text-align: right;
   padding-top: 16px;
   border-top: 1px solid #f0f0f0;
 }
 
+.selection-status {
+  margin-bottom: 12px;
+  color: #52c41a;
+  font-weight: 500;
+}
+
+.selection-warning {
+  color: #faad14;
+}
+
+.action-buttons {
+  text-align: right;
+}
+
 .search-tip {
   text-align: center;
   color: #999;