From 3731b0efff14c89d685238a216365c6c14a1347d Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Fri, 14 Mar 2025 22:54:37 +0800
Subject: [PATCH] update

---
 src/layouts/BasicLayout.vue                |  63 ++--
 src/router/index.js                        |  37 ++-
 src/views/community/CommunitySetDetail.vue |   2 +-
 src/views/community/CommunitySetList.vue   |  22 +-
 src/views/community/TimePeriodList.vue     | 234 ++++++++++++--
 src/views/station/StationList.vue          | 357 +++++++++++++--------
 6 files changed, 502 insertions(+), 213 deletions(-)

diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index 2825ce0..36bf89e 100644
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -25,14 +25,24 @@
           <a-menu-item key="user-list">
             <router-link to="/user/list">用户列表</router-link>
           </a-menu-item>
-          <a-menu-item key="user-partner">
-            <router-link to="/user/partner">运营商管理</router-link>
-          </a-menu-item>
           <a-menu-item key="deliveryman-list">
             <router-link to="/deliveryman/list">配送员列表</router-link>
           </a-menu-item>
         </a-sub-menu>
         
+        <a-sub-menu key="partner">
+          <template #icon>
+            <team-outlined />
+          </template>
+          <template #title>运营商管理</template>
+          <a-menu-item key="partner-list">
+            <router-link to="/partner/list">运营商列表</router-link>
+          </a-menu-item>
+          <a-menu-item key="partner-area">
+            <router-link to="/partner/area">片区管理</router-link>
+          </a-menu-item>
+        </a-sub-menu>
+
         <a-sub-menu key="order">
           <template #icon>
             <shopping-outlined />
@@ -73,8 +83,8 @@
           <a-menu-item key="community-time-periods">
             <router-link to="/community/time-periods">配送时段</router-link>
           </a-menu-item>
-          <a-menu-item key="community-sets">
-            <router-link to="/community/sets">小区集合</router-link>
+          <a-menu-item key="time-period-templates">
+            <router-link to="/community/time-period-templates">时段原型管理</router-link>
           </a-menu-item>
         </a-sub-menu>
 
@@ -118,9 +128,6 @@
           <a-menu-item key="system-config">
             <router-link to="/system/config">系统配置</router-link>
           </a-menu-item>
-          <a-menu-item key="system-time-periods">
-            <router-link to="/system/time-periods">时段配置</router-link>
-          </a-menu-item>
           <a-menu-item key="system-tasks">
             <router-link to="/system/tasks">任务管理</router-link>
           </a-menu-item>
@@ -191,7 +198,8 @@ import {
   SettingOutlined,
   ShoppingOutlined,
   MoneyCollectOutlined,
-  GiftOutlined
+  GiftOutlined,
+  TeamOutlined
 } from '@ant-design/icons-vue'
 import { useRouter, useRoute } from 'vue-router'
 
@@ -209,7 +217,8 @@ export default defineComponent({
     SettingOutlined,
     ShoppingOutlined,
     MoneyCollectOutlined,
-    GiftOutlined
+    GiftOutlined,
+    TeamOutlined
   },
   setup() {
     const router = useRouter()
@@ -250,11 +259,6 @@ export default defineComponent({
             title: '用户列表',
             path: '/user/list'
           },
-          {
-            key: 'user-partner',
-            title: '运营商管理',
-            path: '/user/partner'
-          },
           {
             key: 'deliveryman-list',
             title: '配送员列表',
@@ -262,6 +266,24 @@ export default defineComponent({
           }
         ]
       },
+      {
+        key: 'partner',
+        icon: () => h(TeamOutlined),
+        title: '运营商管理',
+        path: '/partner',
+        children: [
+          {
+            key: 'partner-list',
+            title: '运营商列表',
+            path: '/partner/list'
+          },
+          {
+            key: 'partner-area',
+            title: '片区管理',
+            path: '/partner/area'
+          }
+        ]
+      },
       {
         key: 'order',
         icon: () => h(ShoppingOutlined),
@@ -320,9 +342,9 @@ export default defineComponent({
             path: '/community/time-periods'
           },
           {
-            key: 'community-sets',
-            title: '小区集合',
-            path: '/community/sets'
+            key: 'time-period-templates',
+            title: '时段原型管理',
+            path: '/community/time-period-templates'
           }
         ]
       },
@@ -383,11 +405,6 @@ export default defineComponent({
             title: '系统配置',
             path: '/system/config'
           },
-          {
-            key: 'system-time-periods',
-            title: '时段配置',
-            path: '/system/time-periods'
-          },
           {
             key: 'system-tasks',
             title: '任务管理',
diff --git a/src/router/index.js b/src/router/index.js
index 588d21c..5706d1f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -26,7 +26,7 @@ const routes = [
         path: '/user/partner',
         name: 'PartnerList',
         component: () => import('../views/user/PartnerList.vue'),
-        meta: { title: '运营商管理' }
+        meta: { title: '运营商列表' }
       },
       {
         path: '/deliveryman/list',
@@ -70,6 +70,12 @@ const routes = [
         component: () => import('../views/community/TimePeriodList.vue'),
         meta: { title: '小区配送时段' }
       },
+      {
+        path: 'community/time-period-templates',
+        name: 'TimePeriodTemplates',
+        component: () => import('@/views/system/TimePeriodList.vue'),
+        meta: { title: '时段原型管理' }
+      },
       {
         path: 'community/sets',
         name: 'CommunitySets',
@@ -124,11 +130,6 @@ const routes = [
         component: () => import('@/views/system/ConfigList.vue'),
         meta: { title: '系统配置' }
       },
-      {
-        path: 'time-periods',
-        component: () => import('@/views/system/TimePeriodList.vue'),
-        meta: { title: '时段配置' }
-      },
       {
         path: 'tasks',
         component: () => import('@/views/system/TaskManager.vue'),
@@ -162,6 +163,30 @@ const routes = [
         meta: { title: '提现管理' }
       }
     ]
+  },
+  {
+    path: '/partner',
+    component: BasicLayout,
+    children: [
+      {
+        path: 'list',
+        name: 'PartnerList',
+        component: () => import('../views/user/PartnerList.vue'),
+        meta: { title: '运营商列表' }
+      },
+      {
+        path: 'area',
+        name: 'PartnerArea',
+        component: () => import('../views/community/CommunitySetList.vue'),
+        meta: { title: '片区管理' }
+      },
+      {
+        path: 'area/:id',
+        name: 'PartnerAreaDetail',
+        component: () => import('../views/community/CommunitySetDetail.vue'),
+        meta: { title: '片区详情' }
+      }
+    ]
   }
 ]
 
diff --git a/src/views/community/CommunitySetDetail.vue b/src/views/community/CommunitySetDetail.vue
index e4d18c2..d3cfb35 100644
--- a/src/views/community/CommunitySetDetail.vue
+++ b/src/views/community/CommunitySetDetail.vue
@@ -52,7 +52,7 @@
     <!-- 添加小区模态框 -->
     <a-modal
       v-model:visible="addCommunityVisible"
-      title="添加小区"
+      title="添加小区到片区"
       :footer="null"
     >
       <div class="search-community">
diff --git a/src/views/community/CommunitySetList.vue b/src/views/community/CommunitySetList.vue
index 197ccc3..9269a21 100644
--- a/src/views/community/CommunitySetList.vue
+++ b/src/views/community/CommunitySetList.vue
@@ -2,9 +2,9 @@
   <page-container>
     <div class="community-set-list">
       <div class="table-header">
-        <h1>小区集合</h1>
+        <h1>片区管理</h1>
         <a-button type="primary" @click="showCreateModal">
-          创建小区集合
+          创建片区
         </a-button>
       </div>
       
@@ -34,18 +34,18 @@
     <!-- 创建/修改小区集合模态框 -->
     <a-modal
       v-model:visible="modalVisible"
-      :title="isEdit ? '修改小区集合' : '创建小区集合'"
+      :title="isEdit ? '修改片区' : '创建片区'"
       @ok="handleSubmit"
       @cancel="handleCancel"
       :confirmLoading="submitting"
     >
       <a-form :model="formData" layout="vertical">
         <a-form-item 
-          label="集合名称" 
+          label="片区名称" 
           name="set_name"
-          :rules="[{ required: true, message: '请输入集合名称' }]"
+          :rules="[{ required: true, message: '请输入片区名称' }]"
         >
-          <a-input v-model:value="formData.set_name" placeholder="请输入集合名称" />
+          <a-input v-model:value="formData.set_name" placeholder="请输入片区名称" />
         </a-form-item>
         
         <a-form-item 
@@ -194,7 +194,7 @@ export default defineComponent({
         width: 80,
       },
       {
-        title: '集合名称',
+        title: '片区名称',
         dataIndex: 'set_name',
         key: 'set_name',
         width: 200,
@@ -292,7 +292,7 @@ export default defineComponent({
     // 处理表单提交（创建或修改）
     const handleSubmit = async () => {
       if (!formData.set_name) {
-        message.warning('请输入集合名称')
+        message.warning('请输入片区名称')
         return
       }
       
@@ -301,13 +301,13 @@ export default defineComponent({
         let res
         
         if (isEdit.value) {
-          // 修改集合
+          // 修改片区
           res = await request.put(`/api/community-sets/${editingSetId.value}`, {
             set_name: formData.set_name,
             user_id: formData.user_id || null
           })
         } else {
-          // 创建集合
+          // 创建片区
           res = await request.post('/api/community-sets/', {
             set_name: formData.set_name,
             user_id: formData.user_id || null
@@ -322,7 +322,7 @@ export default defineComponent({
           message.error(res.message || (isEdit.value ? '修改失败' : '创建失败'))
         }
       } catch (error) {
-        console.error(isEdit.value ? '修改小区集合失败:' : '创建小区集合失败:', error)
+        console.error(isEdit.value ? '修改片区失败:' : '创建片区失败:', error)
         message.error(isEdit.value ? '修改失败' : '创建失败')
       } finally {
         submitting.value = false
diff --git a/src/views/community/TimePeriodList.vue b/src/views/community/TimePeriodList.vue
index 77b9b3b..9151115 100644
--- a/src/views/community/TimePeriodList.vue
+++ b/src/views/community/TimePeriodList.vue
@@ -8,39 +8,78 @@
         </a-button>
       </div>
 
-      <a-table
-        :columns="columns"
-        :data-source="tableData"
-        :pagination="pagination"
-        :loading="loading"
-        @change="handleTableChange"
-        row-key="community_id"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'time_periods'">
-            <a-space wrap>
-              <a-tag v-for="(period, index) in record.time_periods || []" :key="index" color="blue">
-                {{ period.time_period_name }}
-                <span>(运力:{{ period.capacity > 0 ? period.capacity : '不限制' }})</span>
-              </a-tag>
-            </a-space>
+      <!-- 过滤区域 -->
+      <div class="table-filter">
+        <a-form layout="inline">
+          <a-form-item label="小区名称">
+            <a-input
+              v-model:value="searchKeyword"
+              placeholder="请输入小区名称搜索"
+              style="width: 200px"
+              allowClear
+              @change="handleSearch"
+              @pressEnter="handleSearch"
+            />
+          </a-form-item>
+          <a-form-item>
+            <a-button type="primary" @click="handleSearch">
+              搜索
+            </a-button>
+          </a-form-item>
+        </a-form>
+      </div>
+
+      <!-- 表格区域 -->
+      <a-card :bordered="false" class="table-card">
+        <a-table
+          :columns="columns"
+          :data-source="tableData"
+          :pagination="pagination"
+          :loading="loading"
+          @change="handleTableChange"
+          row-key="community_id"
+          :rowClassName="() => 'custom-table-row'"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'time_periods'">
+              <div class="time-periods-container">
+                <a-tag 
+                  v-for="(period, index) in record.time_periods || []" 
+                  :key="index" 
+                  :color="getTagColor(period.capacity)"
+                  class="time-period-tag"
+                >
+                  <span class="period-name">{{ period.time_period_name }}</span>
+                  <span class="period-time">{{ formatTime(period.time_period_from_time) }} ~ {{ formatTime(period.time_period_to_time) }}</span>
+                  <span class="period-capacity">运力: {{ period.capacity > 0 ? period.capacity : '不限制' }}</span>
+                </a-tag>
+                <a-empty 
+                  v-if="!record.time_periods || record.time_periods.length === 0" 
+                  description="未配置配送时段" 
+                  :image="Empty.PRESENTED_IMAGE_SIMPLE"
+                  class="empty-time-periods"
+                />
+              </div>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-button type="link" @click="handleEdit(record)" class="edit-button">
+                <template #icon><edit-outlined /></template>
+                编辑
+              </a-button>
+            </template>
           </template>
-          <template v-if="column.key === 'action'">
-            <a-space>
-              <a @click="handleEdit(record)">编辑</a>
-            </a-space>
-          </template>
-        </template>
-      </a-table>
+        </a-table>
+      </a-card>
 
       <!-- 配置时段模态框 -->
       <a-modal
         v-model:visible="modalVisible"
-        title="配置小区配送时段"
+        :title="currentCommunityId ? `编辑 ${getCurrentCommunityName()} 配送时段` : '配置小区配送时段'"
         @ok="handleSubmit"
         @cancel="handleCancel"
         :confirmLoading="submitting"
         width="720px"
+        class="time-period-modal"
       >
         <a-form
           ref="formRef"
@@ -58,6 +97,7 @@
               :options="communityOptions"
               :disabled="!!currentCommunityId"
               @change="handleCommunityChange"
+              style="width: 100%"
             />
           </a-form-item>
           
@@ -72,6 +112,7 @@
               :pagination="false"
               size="small"
               :scroll="{ y: 300 }"
+              :rowClassName="(record) => isTimePeriodSelected(record.id) ? 'selected-time-period-row' : ''"
             >
               <template #bodyCell="{ column, record }">
                 <template v-if="column.key === 'time_range'">
@@ -103,9 +144,10 @@
 
 <script>
 import { defineComponent, ref, onMounted, computed, h } from 'vue'
-import { message, Table, Space, Tag, Button, Modal, Form, Select, Checkbox, InputNumber } from 'ant-design-vue'
+import { message, Table, Space, Tag, Button, Modal, Form, Select, Checkbox, InputNumber, Empty, Card } from 'ant-design-vue'
 import PageContainer from '@/components/PageContainer.vue'
 import request from '@/utils/request'
+import { EditOutlined } from '@ant-design/icons-vue'
 
 export default defineComponent({
   components: {
@@ -119,12 +161,15 @@ export default defineComponent({
     AFormItem: Form.Item,
     ASelect: Select,
     ACheckbox: Checkbox,
-    AInputNumber: InputNumber
+    AInputNumber: InputNumber,
+    ACard: Card,
+    EditOutlined
   },
   
   setup() {
     const loading = ref(false)
     const tableData = ref([])
+    const searchKeyword = ref('')
     
     const pagination = ref({
       current: 1,
@@ -156,8 +201,9 @@ export default defineComponent({
       {
         title: '操作',
         key: 'action',
-        width: 80,
-        fixed: 'right'
+        width: 100,
+        fixed: 'right',
+        align: 'center'
       }
     ]
 
@@ -169,6 +215,11 @@ export default defineComponent({
           skip: (pagination.value.current - 1) * pagination.value.pageSize,
           limit: pagination.value.pageSize
         }
+        
+        if (searchKeyword.value) {
+          params.keyword = searchKeyword.value
+        }
+        
         const res = await request.get('/api/community-time-periods/group_by_community', { params })
         if (res.code === 200) {
           tableData.value = res.data.items || res.data
@@ -184,6 +235,12 @@ export default defineComponent({
       }
     }
 
+    // 处理搜索
+    const handleSearch = () => {
+      pagination.value.current = 1
+      fetchData()
+    }
+
     // 处理表格分页变化
     const handleTableChange = (pag) => {
       pagination.value.current = pag.current
@@ -203,6 +260,20 @@ export default defineComponent({
       time_periods: []
     })
 
+    // 获取当前编辑的小区名称
+    const getCurrentCommunityName = () => {
+      if (!currentCommunityId.value) return ''
+      const community = communities.value.find(c => c.id === currentCommunityId.value)
+      return community ? community.name : ''
+    }
+
+    // 根据容量获取标签颜色
+    const getTagColor = (capacity) => {
+      if (capacity === 0) return 'green'
+      if (capacity < 10) return 'orange'
+      return 'blue'
+    }
+
     // 时段表格列
     const timePeriodColumns = [
       {
@@ -422,8 +493,10 @@ export default defineComponent({
       tableData,
       columns,
       pagination,
+      searchKeyword,
       formatTime,
       handleTableChange,
+      handleSearch,
       modalVisible,
       submitting,
       formState,
@@ -440,7 +513,10 @@ export default defineComponent({
       updateTimePeriodCapacity,
       handleTimePeriodSelect,
       handleCommunityChange,
-      currentCommunityId
+      currentCommunityId,
+      getCurrentCommunityName,
+      getTagColor,
+      Empty
     }
   }
 })
@@ -458,11 +534,103 @@ export default defineComponent({
   margin: 0;
 }
 
+.table-filter {
+  margin-bottom: 16px;
+  padding: 16px 24px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+.table-card {
+  margin-bottom: 24px;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+/* 时段标签样式 */
+.time-periods-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+.time-period-tag {
+  display: flex;
+  flex-direction: column;
+  padding: 6px 8px;
+  border-radius: 4px;
+  margin: 0;
+}
+
+.period-name {
+  font-weight: 500;
+  margin-bottom: 2px;
+}
+
+.period-time {
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+
+.period-capacity {
+  font-size: 12px;
+  background-color: rgba(255, 255, 255, 0.2);
+  padding: 1px 4px;
+  border-radius: 2px;
+  margin-top: 2px;
+}
+
+.empty-time-periods {
+  padding: 8px 0;
+  width: 100%;
+}
+
+/* 表格样式 */
+:deep(.custom-table-row) {
+  transition: all 0.3s;
+}
+
+:deep(.custom-table-row:hover) {
+  background-color: #f5f7fa;
+}
+
+:deep(.ant-table-thead > tr > th) {
+  background-color: #f5f7fa;
+  font-weight: 500;
+}
+
+.edit-button {
+  padding: 0 8px;
+}
+
+/* 模态框样式 */
+.time-period-modal {
+  :deep(.ant-modal-header) {
+    border-bottom: 1px solid #f0f0f0;
+    padding: 16px 24px;
+  }
+  
+  :deep(.ant-modal-body) {
+    padding: 24px;
+  }
+  
+  :deep(.ant-modal-footer) {
+    border-top: 1px solid #f0f0f0;
+    padding: 12px 24px;
+  }
+}
+
+:deep(.selected-time-period-row) {
+  background-color: #e6f7ff;
+}
+
+:deep(.selected-time-period-row:hover) {
+  background-color: #cceeff !important;
+}
+
 :deep(.ant-table-content) {
   overflow-x: auto;
 }
-
-:deep(.ant-tag) {
-  margin-bottom: 5px;
-}
 </style> 
\ No newline at end of file
diff --git a/src/views/station/StationList.vue b/src/views/station/StationList.vue
index 39e39c8..e216178 100644
--- a/src/views/station/StationList.vue
+++ b/src/views/station/StationList.vue
@@ -30,30 +30,48 @@
         </a-form>
       </div>
       
-      <a-table 
-        :columns="columns" 
-        :data-source="tableData" 
-        :pagination="pagination"
-        :loading="loading"
-        @change="handleTableChange"
-        row-key="id"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'action'">
-            <a-space>
-              <a-button type="link" @click="handleEdit(record)">修改</a-button>
-              <a-popconfirm
-                title="确定要删除该驿站吗？"
-                ok-text="确定"
-                cancel-text="取消"
-                @confirm="handleDelete(record)"
+      <!-- 按小区分组显示驿站 -->
+      <div v-if="!loading" class="community-station-list">
+        <div v-if="groupedData.length === 0" class="empty-data">
+          <a-empty description="暂无驿站数据" />
+        </div>
+        
+        <div v-else class="community-groups">
+          <div v-for="community in groupedData" :key="community.community_id" class="community-card">
+            <div class="community-header">
+              <h3 class="community-name">{{ community.community_name }}</h3>
+              <div class="header-right">
+                <span class="station-count">共 {{ community.stations.length }} 个驿站</span>
+                <a-button type="link" @click="showAddModalForCommunity(community.community_id)">
+                  添加驿站
+                </a-button>
+              </div>
+            </div>
+            
+            <div class="station-grid">
+              <div 
+                v-for="station in community.stations" 
+                :key="station.station_id"
+                class="station-item"
+                @click="handleEdit(station)"
               >
-                <a-button type="link" danger>删除</a-button>
-              </a-popconfirm>
-            </a-space>
-          </template>
-        </template>
-      </a-table>
+                <div class="station-content">
+                  <div class="station-name">{{ station.station_name }}</div>
+                  <div class="station-id">ID: {{ station.station_id }}</div>
+                </div>
+                <div class="station-edit-icon">
+                  <edit-outlined />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 加载中状态 -->
+      <div v-else class="loading-container">
+        <a-spin tip="加载中..."></a-spin>
+      </div>
 
       <!-- 添加驿站模态框 -->
       <a-modal
@@ -95,7 +113,7 @@
         </a-form>
       </a-modal>
 
-      <!-- 添加修改驿站模态框 -->
+      <!-- 修改驿站模态框 -->
       <a-modal
         v-model:visible="editModalVisible"
         title="修改驿站"
@@ -104,23 +122,12 @@
         @cancel="handleEditCancel"
       >
         <template #footer>
-          <div class="modal-footer-with-delete">
-            <a-popconfirm
-              title="确定要删除该驿站吗？"
-              ok-text="确定"
-              cancel-text="取消"
-              @confirm="handleDelete({ id: currentEditId })"
-              :disabled="deleteLoading"
-            >
-              <a-button danger :loading="deleteLoading">删除驿站</a-button>
-            </a-popconfirm>
-            <a-space>
-              <a-button @click="handleEditCancel">取消</a-button>
-              <a-button type="primary" :loading="editLoading" @click="handleEditSubmit">
-                保存
-              </a-button>
-            </a-space>
-          </div>
+          <a-space>
+            <a-button @click="handleEditCancel">取消</a-button>
+            <a-button type="primary" :loading="editLoading" @click="handleEditSubmit">
+              保存
+            </a-button>
+          </a-space>
         </template>
 
         <a-form
@@ -152,73 +159,39 @@
 <script>
 import { defineComponent, ref, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
-import { getStationList, createStation, updateStation } from '@/api/station'
+import { createStation, updateStation } from '@/api/station'
 import { getCommunityList } from '@/api/community'
 import PageContainer from '@/components/PageContainer.vue'
 import request from '@/utils/request'
+import { EditOutlined } from '@ant-design/icons-vue'
 
 export default defineComponent({
   components: {
-    PageContainer
+    PageContainer,
+    EditOutlined
   },
   setup() {
     const loading = ref(false)
-    const tableData = ref([])
+    const groupedData = ref([])
     const communityOptions = ref([])
     const filterForm = ref({
       community_id: undefined
     })
-    
-    const pagination = ref({
-      current: 1,
-      pageSize: 10,
-      total: 0,
-      showSizeChanger: true,
-      showTotal: (total) => `共 ${total} 条记录`
-    })
 
-    const columns = [
-      {
-        title: 'ID',
-        dataIndex: 'id',
-        key: 'id',
-        width: 80,
-        align: 'center'
-      },
-      {
-        title: '驿站名称',
-        dataIndex: 'name',
-        key: 'name',
-        width: 150
-      },
-      {
-        title: '所属小区',
-        dataIndex: 'community_name',
-        key: 'community_name',
-        width: 150
-      },
-      {
-        title: '操作',
-        key: 'action',
-        width: 120,
-        align: 'center'
-      }
-    ]
-
-    // 获取驿站列表数据
+    // 获取驿站列表数据（按小区分组）
     const fetchData = async () => {
       try {
         loading.value = true
-        const params = {
-          skip: (pagination.value.current - 1) * pagination.value.pageSize,
-          limit: pagination.value.pageSize,
-          community_id: filterForm.value.community_id
+        const params = {}
+        
+        // 如果选择了特定小区，则添加过滤条件
+        if (filterForm.value.community_id) {
+          params.community_id = filterForm.value.community_id
         }
         
-        const res = await getStationList(params)
+        const res = await request.get('/api/station/group_by_community', { params })
         if (res.code === 200) {
-          tableData.value = res.data.items
-          pagination.value.total = res.data.total
+          groupedData.value = res.data || []
         } else {
           message.error(res.message || '获取数据失败')
         }
@@ -242,16 +215,8 @@ export default defineComponent({
       }
     }
 
-    // 表格变化处理
-    const handleTableChange = (pag) => {
-      pagination.value.current = pag.current
-      pagination.value.pageSize = pag.pageSize
-      fetchData()
-    }
-
     // 处理过滤
     const handleFilter = () => {
-      pagination.value.current = 1
       fetchData()
     }
 
@@ -272,6 +237,19 @@ export default defineComponent({
 
     // 显示添加模态框
     const showAddModal = () => {
+      formState.value = {
+        name: '',
+        community_id: undefined
+      }
+      addModalVisible.value = true
+    }
+
+    // 为特定小区显示添加模态框
+    const showAddModalForCommunity = (communityId) => {
+      formState.value = {
+        name: '',
+        community_id: communityId
+      }
       addModalVisible.value = true
     }
 
@@ -306,7 +284,6 @@ export default defineComponent({
     // 修改驿站相关
     const editModalVisible = ref(false)
     const editLoading = ref(false)
-    const deleteLoading = ref(false)
     const editFormRef = ref(null)
     const editFormState = ref({
       name: '',
@@ -315,21 +292,34 @@ export default defineComponent({
     const currentEditId = ref(null)
 
     // 显示修改模态框
-    const handleEdit = (record) => {
-      currentEditId.value = record.id
+    const handleEdit = (station) => {
+      currentEditId.value = station.station_id
       editFormState.value = {
-        name: record.name,
-        community_id: record.community_id
+        name: station.station_name,
+        community_id: findCommunityIdByStation(station)
       }
       editModalVisible.value = true
     }
 
+    // 根据驿站找到所属小区ID
+    const findCommunityIdByStation = (station) => {
+      for (const community of groupedData.value) {
+        if (community.stations.some(s => s.station_id === station.station_id)) {
+          return community.community_id
+        }
+      }
+      return undefined
+    }
+
     // 提交修改
     const handleEditSubmit = () => {
       editFormRef.value.validate().then(async () => {
         try {
           editLoading.value = true
-          const res = await updateStation(currentEditId.value, editFormState.value)
+          const res = await updateStation(currentEditId.value, {
+            name: editFormState.value.name,
+            community_id: editFormState.value.community_id
+          })
           if (res.code === 200) {
             message.success('修改成功')
             editModalVisible.value = false
@@ -352,29 +342,6 @@ export default defineComponent({
       editModalVisible.value = false
     }
 
-    // 删除驿站
-    const handleDelete = async (record) => {
-      try {
-        deleteLoading.value = true
-        const res = await request.delete(`/api/station/${record.id}`)
-        if (res.code === 200) {
-          message.success('删除成功')
-          // 如果是从编辑模态框中删除，则关闭模态框
-          if (editModalVisible.value) {
-            editModalVisible.value = false
-          }
-          fetchData() // 刷新列表
-        } else {
-          message.error(res.message || '删除失败')
-        }
-      } catch (error) {
-        console.error('删除驿站失败:', error)
-        message.error('删除失败')
-      } finally {
-        deleteLoading.value = false
-      }
-    }
-
     onMounted(() => {
       fetchData()
       fetchCommunityOptions()
@@ -382,12 +349,9 @@ export default defineComponent({
 
     return {
       loading,
-      columns,
-      tableData,
-      pagination,
+      groupedData,
       communityOptions,
       filterForm,
-      handleTableChange,
       handleFilter,
       addModalVisible,
       confirmLoading,
@@ -395,17 +359,17 @@ export default defineComponent({
       formRef,
       rules,
       showAddModal,
+      showAddModalForCommunity,
       handleAdd,
       handleCancel,
       editModalVisible,
       editLoading,
-      deleteLoading,
       editFormRef,
       editFormState,
       handleEdit,
       handleEditSubmit,
       handleEditCancel,
-      handleDelete
+      currentEditId
     }
   }
 })
@@ -430,6 +394,129 @@ export default defineComponent({
   border-radius: 2px;
 }
 
+/* 社区驿站列表样式 */
+.community-station-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.community-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.community-card {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s;
+}
+
+.community-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.community-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.community-name {
+  margin: 0;
+  font-size: 18px;
+  color: #1890ff;
+  font-weight: 500;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.station-count {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.45);
+  background: #f5f5f5;
+  padding: 4px 10px;
+  border-radius: 12px;
+}
+
+.station-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 12px;
+}
+
+.station-item {
+  background-color: #f0f7ff;
+  border-radius: 6px;
+  transition: all 0.3s;
+  cursor: pointer;
+  border: 1px solid #d9e8ff;
+  position: relative;
+  overflow: hidden;
+}
+
+.station-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.15);
+  background-color: #e6f7ff;
+}
+
+.station-item:hover .station-edit-icon {
+  opacity: 1;
+}
+
+.station-content {
+  padding: 12px;
+  text-align: center;
+}
+
+.station-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: #1890ff;
+  margin-bottom: 4px;
+}
+
+.station-id {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.station-edit-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: rgba(24, 144, 255, 0.1);
+  color: #1890ff;
+  padding: 4px;
+  border-bottom-left-radius: 6px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.empty-data {
+  margin: 32px 0;
+  text-align: center;
+}
+
+/* 加载状态容器 */
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+}
+
 /* Select 组件样式调整 */
 :deep(.ant-select-selector) {
   height: 32px !important;
@@ -476,12 +563,4 @@ export default defineComponent({
   border-top: 1px solid #f0f0f0;
   padding: 16px 24px;
 }
-
-/* 带删除按钮的模态框底部样式 */
-.modal-footer-with-delete {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
 </style> 
\ No newline at end of file