diff --git a/public/index.html b/public/index.html
index 4da3fe2..8476fd8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,11 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>DM Admin</title>
     <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
+    <script type="text/javascript">
+      window._AMapSecurityConfig = {
+        securityJsCode: '93527b49270ba2142f47f0407da7c0d6'
+      }
+    </script>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/api/community.js b/src/api/community.js
index 78bdf37..0c21e1a 100644
--- a/src/api/community.js
+++ b/src/api/community.js
@@ -16,4 +16,13 @@ export function getBuildingList(params) {
     method: 'get',
     params
   })
+}
+
+// 添加新小区
+export function createCommunity(data) {
+  return request({
+    url: '/api/community/',
+    method: 'post',
+    data
+  })
 } 
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 1dfb70b..c7d3467 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,7 +16,9 @@ import {
   Divider,
   Tag,
   Modal,
-  Select
+  Select,
+  InputNumber,
+  AutoComplete
 } from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
 
@@ -39,5 +41,7 @@ app.use(Divider)
 app.use(Tag)
 app.use(Modal)
 app.use(Select)
+app.use(InputNumber)
+app.use(AutoComplete)
 
 app.mount('#app') 
\ No newline at end of file
diff --git a/src/utils/amap.js b/src/utils/amap.js
index 25de81e..4bd40f2 100644
--- a/src/utils/amap.js
+++ b/src/utils/amap.js
@@ -1,20 +1,37 @@
 export function initAMap() {
   return new Promise((resolve, reject) => {
     if (window.AMap) {
-      resolve(window.AMap);
+      // 如果已经加载过，直接加载插件
+      window.AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], () => {
+        resolve(window.AMap);
+      });
       return;
     }
-    
+
+    // 加载高德地图脚本
     const script = document.createElement('script');
     script.type = 'text/javascript';
     script.async = true;
-    script.src = `https://webapi.amap.com/maps?v=2.0&key=fd47f3d4f54b675693c7d59dcd2a6c5f`;
-    
-    script.onerror = reject;
-    script.onload = () => {
+    script.src = `https://webapi.amap.com/maps?v=2.0&key=fd47f3d4f54b675693c7d59dcd2a6c5f&plugin=AMap.PlaceSearch,AMap.AutoComplete&callback=initAMapCallback`;
+
+    // 创建回调函数
+    window.initAMapCallback = () => {
       resolve(window.AMap);
     };
-    
+
+    script.onerror = () => {
+      reject(new Error('加载地图失败'));
+    };
+
     document.head.appendChild(script);
   });
+}
+
+// 添加地图工具函数
+export function createMap(container, options = {}) {
+  return new window.AMap.Map(container, {
+    zoom: 13,
+    viewMode: '2D',
+    ...options
+  });
 } 
\ No newline at end of file
diff --git a/src/views/community/CommunityList.vue b/src/views/community/CommunityList.vue
index 78c8269..8ecc2e6 100644
--- a/src/views/community/CommunityList.vue
+++ b/src/views/community/CommunityList.vue
@@ -2,6 +2,7 @@
   <div class="community-list">
     <div class="table-header">
       <h1>小区列表</h1>
+      <a-button type="primary" @click="showAddModal">添加小区</a-button>
     </div>
     
     <a-table 
@@ -36,14 +37,93 @@
     >
       <div id="map-container" style="height: 500px;"></div>
     </a-modal>
+
+    <a-modal
+      v-model:visible="addModalVisible"
+      title="添加小区"
+      @ok="handleAdd"
+      @cancel="handleCancel"
+      :confirmLoading="confirmLoading"
+      width="680px"
+    >
+      <template #footer>
+        <a-space>
+          <a-button @click="handleCancel">取消</a-button>
+          <a-button type="primary" :loading="confirmLoading" @click="handleAdd">
+            保存
+          </a-button>
+        </a-space>
+      </template>
+
+      <a-form
+        ref="formRef"
+        :model="formState"
+        :rules="rules"
+        :label-col="{ span: 6 }"
+        :wrapper-col="{ span: 16 }"
+      >
+        <a-form-item label="地址搜索">
+          <a-auto-complete
+            v-model:value="searchAddress"
+            :options="searchOptions"
+            placeholder="输入地址搜索"
+            @change="handleSearch"
+            @select="handleSelect"
+            :loading="searchLoading"
+            allow-clear
+          >
+            <template #option="{ value: val, label }">
+              <div>{{ label }}</div>
+            </template>
+          </a-auto-complete>
+        </a-form-item>
+
+        <a-form-item label=" " :colon="false">
+          <div class="map-container">
+            <div id="add-map-container" style="height: 240px;"></div>
+          </div>
+        </a-form-item>
+
+        <a-form-item label="小区名称" name="name" required>
+          <a-input v-model:value="formState.name" placeholder="请输入小区名称" />
+        </a-form-item>
+
+        <a-form-item label="详细地址" name="address" required>
+          <a-input v-model:value="formState.address" placeholder="请输入详细地址" />
+        </a-form-item>
+
+        <a-form-item label="经纬度" required>
+          <a-input-group compact>
+            <a-input-number
+              v-model:value="formState.longitude"
+              :min="-180"
+              :max="180"
+              :controls="false"
+              disabled
+              style="width: 50%"
+              placeholder="经度"
+            />
+            <a-input-number
+              v-model:value="formState.latitude"
+              :min="-90"
+              :max="90"
+              :controls="false"
+              disabled
+              style="width: 50%"
+              placeholder="纬度"
+            />
+          </a-input-group>
+        </a-form-item>
+      </a-form>
+    </a-modal>
   </div>
 </template>
 
 <script>
 import { defineComponent, ref, onMounted, nextTick } from 'vue'
 import { message, Tag } from 'ant-design-vue'
-import { getCommunityList } from '@/api/community'
-import { initAMap } from '@/utils/amap'
+import { getCommunityList, createCommunity } from '@/api/community'
+import { initAMap, createMap } from '@/utils/amap'
 import dayjs from 'dayjs'
 
 export default defineComponent({
@@ -200,6 +280,203 @@ export default defineComponent({
       mapVisible.value = false
     }
 
+    // 添加小区相关的响应式变量
+    const addModalVisible = ref(false)
+    const confirmLoading = ref(false)
+    const searchLoading = ref(false)
+    const searchAddress = ref('')
+    const searchOptions = ref([])
+    const addMap = ref(null)
+    const addMarker = ref(null)
+    const formRef = ref(null)
+    
+    const formState = ref({
+      name: '',
+      address: '',
+      longitude: null,
+      latitude: null
+    })
+
+    const rules = {
+      name: [{ required: true, message: '请输入小区名称' }],
+      address: [{ required: true, message: '请输入详细地址' }],
+      longitude: [{ required: true, message: '请选择位置获取经度' }],
+      latitude: [{ required: true, message: '请选择位置获取纬度' }],
+    }
+
+    // 显示添加模态框
+    const showAddModal = async () => {
+      addModalVisible.value = true
+      await nextTick()
+      initAddMap()
+    }
+
+    // 更新标记位置和表单信息
+    const updateMarkerPosition = (lng, lat, name = '') => {
+      if (!addMap.value) return
+
+      formState.value.longitude = lng
+      formState.value.latitude = lat
+
+      // 如果提供了名称，更新小区名称
+      if (name && !formState.value.name) {
+        formState.value.name = name
+      }
+
+      if (addMarker.value) {
+        addMarker.value.setPosition([lng, lat])
+      } else {
+        const AMap = window.AMap
+        addMarker.value = new AMap.Marker({
+          position: [lng, lat],
+          map: addMap.value
+        })
+      }
+    }
+
+    // 地图点击事件处理
+    const initAddMap = async () => {
+      try {
+        await initAMap();
+        
+        if (!addMap.value) {
+          addMap.value = createMap('add-map-container', {
+            center: [116.397428, 39.90923]
+          });
+
+          // 添加点击事件
+          addMap.value.on('click', (e) => {
+            const { lng, lat } = e.lnglat;
+            // 点击地图时，使用逆地理编码获取位置信息
+            const geocoder = new window.AMap.Geocoder();
+            geocoder.getAddress([lng, lat], (status, result) => {
+              if (status === 'complete' && result.info === 'OK') {
+                const address = result.regeocode;
+                formState.value.address = address.formattedAddress;
+                // 如果还没有设置小区名称，使用POI信息或地址信息作为默认名称
+                if (!formState.value.name && address.pois && address.pois.length > 0) {
+                  formState.value.name = address.pois[0].name;
+                }
+                updateMarkerPosition(lng, lat);
+              }
+            });
+          });
+        }
+      } catch (error) {
+        console.error('初始化地图失败:', error);
+        message.error('初始化地图失败，请刷新重试');
+      }
+    };
+
+    // 搜索地址
+    const handleSearch = async (value) => {
+      if (!value || value.length < 2) {
+        searchOptions.value = [];
+        return;
+      }
+
+      try {
+        searchLoading.value = true;
+        await initAMap();  // 确保地图已加载
+        
+        const autoComplete = new window.AMap.AutoComplete({
+          city: '全国'
+        });
+
+        const result = await new Promise((resolve, reject) => {
+          autoComplete.search(value, (status, result) => {
+            if (status === 'complete') {
+              resolve(result);
+            } else {
+              reject(new Error('搜索失败'));
+            }
+          });
+        });
+
+        searchOptions.value = result.tips.map(tip => ({
+          value: tip.name,
+          label: `${tip.name} (${tip.district})`,
+          location: tip.location,
+          address: tip.address || tip.district
+        }));
+      } catch (error) {
+        console.error('搜索地址失败:', error);
+        searchOptions.value = [];
+      } finally {
+        searchLoading.value = false;
+      }
+    };
+
+    // 选择地址
+    const handleSelect = (value, option) => {
+      const selectedOption = searchOptions.value.find(opt => opt.value === value);
+      if (selectedOption) {
+        // 更新地址和小区名称
+        formState.value.address = selectedOption.address;
+        formState.value.name = selectedOption.value; // 使用选中的地点名称作为小区名称
+
+        if (selectedOption.location) {
+          updateMarkerPosition(
+            selectedOption.location.lng, 
+            selectedOption.location.lat,
+            selectedOption.value
+          );
+          addMap.value.setCenter([selectedOption.location.lng, selectedOption.location.lat]);
+        } else {
+          // 如果没有直接的位置信息，使用 PlaceSearch 获取详细信息
+          const placeSearch = new window.AMap.PlaceSearch({
+            city: '全国'
+          });
+          
+          placeSearch.search(value, (status, result) => {
+            if (status === 'complete' && result.info === 'OK') {
+              const poi = result.poiList.pois[0];
+              formState.value.address = poi.address;
+              updateMarkerPosition(
+                poi.location.lng, 
+                poi.location.lat,
+                poi.name
+              );
+              addMap.value.setCenter([poi.location.lng, poi.location.lat]);
+            }
+          });
+        }
+      }
+    };
+
+    // 提交表单
+    const handleAdd = () => {
+      formRef.value.validate().then(async () => {
+        try {
+          confirmLoading.value = true
+          const res = await createCommunity(formState.value)
+          if (res.code === 200) {
+            message.success('添加成功')
+            addModalVisible.value = false
+            fetchData() // 刷新列表
+          } else {
+            message.error(res.message || '添加失败')
+          }
+        } catch (error) {
+          console.error('添加小区失败:', error)
+          message.error('添加失败')
+        } finally {
+          confirmLoading.value = false
+        }
+      })
+    }
+
+    // 取消添加
+    const handleCancel = () => {
+      formRef.value?.resetFields()
+      addModalVisible.value = false
+      searchAddress.value = ''
+      if (addMarker.value) {
+        addMarker.value.setMap(null)
+        addMarker.value = null
+      }
+    }
+
     onMounted(() => {
       fetchData()
     })
@@ -215,7 +492,20 @@ export default defineComponent({
       closeMap,
       getStatusText,
       getStatusColor,
-      formatDateTime
+      formatDateTime,
+      addModalVisible,
+      confirmLoading,
+      searchLoading,
+      searchAddress,
+      formState,
+      formRef,
+      rules,
+      showAddModal,
+      handleAdd,
+      handleCancel,
+      handleSearch,
+      searchOptions,
+      handleSelect
     }
   }
 })
@@ -236,4 +526,120 @@ export default defineComponent({
 :deep(.ant-table-content) {
   overflow-x: auto;
 }
+
+:deep(.ant-modal-body) {
+  padding: 24px;
+  max-width: 100%;
+}
+
+:deep(.ant-form) {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 16px;
+}
+
+:deep(.ant-input),
+:deep(.ant-input-number),
+:deep(.ant-auto-complete) {
+  width: 100% !important;
+}
+
+:deep(.ant-input-number-input) {
+  height: 32px;
+}
+
+:deep(.ant-form-item-control-input) {
+  width: 100%;
+}
+
+:deep(.ant-col) {
+  padding-right: 12px;
+  padding-left: 12px;
+}
+
+:deep(.ant-select-item-option-content) {
+  white-space: normal;
+  word-break: break-all;
+}
+
+:deep(.ant-row) {
+  margin-bottom: 0 !important;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 16px;
+}
+
+:deep(.ant-col) {
+  padding-right: 8px;
+  padding-left: 8px;
+}
+
+/* 地图区域样式 */
+.map-section {
+  margin-bottom: 24px;
+  padding: 16px;
+  background: #fafafa;
+  border-radius: 4px;
+}
+
+.search-item {
+  margin-bottom: 16px;
+}
+
+.map-container {
+  border: 1px solid #f0f0f0;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+:deep(.ant-form-item-label) {
+  text-align: right;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 24px;
+}
+
+:deep(.ant-input),
+:deep(.ant-input-number),
+:deep(.ant-auto-complete) {
+  width: 100%;
+}
+
+:deep(.ant-input-group) {
+  display: flex;
+}
+
+:deep(.ant-input-group .ant-input-number) {
+  border-radius: 0;
+  
+  &:first-child {
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  
+  &:last-child {
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+}
+
+:deep(.ant-form) {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+:deep(.ant-modal-body) {
+  padding: 24px;
+}
+
+:deep(.ant-modal-footer) {
+  text-align: right;
+  padding: 16px 24px;
+  border-top: 1px solid #f0f0f0;
+}
 </style> 
\ No newline at end of file
