feat: 灾害管理与部分组件

packages/mobile/src/components/SearchInput.vue

@@ -3,18 +3,26 @@
     <div class="input-wrapper">
       <div class="input-block">
         <van-icon class="search-icon" name="search" />
-        <input class="inner-input" v-model="modelValue" :placeholder="placeholder" />
+        <input 
-        <van-icon class="close-icon" name="clear" v-if="modelValue !== ''" @click="modelValue = ''" />
+          class="inner-input" 
+          v-model="modelValue" 
+          :placeholder="placeholder" 
+        />
+        <van-icon 
+          class="close-icon" 
+          name="clear" 
+          v-if="modelValue !== ''" 
+          @click="clearInput" 
+        />
+      </div>
+      <!-- 右侧插槽：用于放置全部和筛选按钮 -->
+      <div class="slot-wrapper" v-if="$slots.extra">
+        <slot name="extra"></slot>
       </div>
-
-      <!-- 占位符 -->
-      <!-- <div class="placeholder-block" v-if="modelValue === '111'">
-        <van-icon class="search-icon" name="search" />
-        <span class="placeholder-text">{{ placeholder }}</span>
-      </div> -->
     </div>
   </div>
 </template>
+
 <script setup>
 import { onMounted, ref } from 'vue'
 
@@ -26,7 +34,13 @@ const props = defineProps({
     default: '请输入关键词'
   }
 })
+
+// 清空输入框
+const clearInput = () => {
+  modelValue.value = ''
+}
 </script>
+
 <style scoped lang="scss">
 .search-input {
   position: relative;
@@ -37,19 +51,23 @@ const props = defineProps({
 }
 
 .input-wrapper {
+  display: flex;
+  align-items: center;
   width: 100%;
   height: 100%;
   background-color: #fff;
   border-radius: 4px;
+  gap: 12px; // 输入框和按钮组间距
+  padding-right: 12px; // 右侧内边距
+  box-sizing: border-box;
 }
 
 .input-block {
   position: relative;
+  flex: 1;
+  height: 100%;
   display: flex;
   justify-content: center;
-  width: 100%;
-  height: 100%;
-  padding: 0 20px;
   box-sizing: border-box;
 
   .search-icon, .close-icon {
@@ -59,10 +77,18 @@ const props = defineProps({
     transform: translateY(-50%);
     font-size: 20px;
     color: #9b9b9b;
+    pointer-events: none; // 搜索图标不阻挡点击
   }
+  
   .close-icon {
     left: unset;
     right: 20px;
+    pointer-events: auto; // 清空图标可点击
+    cursor: pointer;
+    
+    &:active {
+      opacity: 0.6;
+    }
   }
 }
 
@@ -71,28 +97,17 @@ const props = defineProps({
   border: none;
   padding: 0;
   margin: 0;
+  width: 100%;
   height: 100%;
   text-align: center;
   font-size: 14px;
+  background: transparent;
 }
 
-.placeholder-block {
+.slot-wrapper {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   display: flex;
   align-items: center;
-  pointer-events: none;
+  gap: 8px; // 按钮间距
-
+  flex-shrink: 0; // 防止压缩
-  .search-icon {
-    font-size: 20px;
-    margin-right: 3px;
-    color: #9b9b9b;
-  }
-
-  .placeholder-text {
-    color: #9b9b9b;
-  }
 }
-</style>
+</style>

packages/mobile/src/router/index.js

@@ -80,6 +80,11 @@ const routes = [
     path: '/warningMessageHandle',
     name: 'WarningMessageHandle',
     component: () => import('../views/WarningMessage/WarningMessageHandle.vue')
+  },
+  {
+    path: '/disasterManagement',
+    name: 'DisasterManagement',
+    component: () => import('../views/DisasterManagement/DisasterManagement.vue')
   }
 ]
 

packages/mobile/src/views/DisasterManagement/DisasterManagement.vue

@@ -1,33 +1,43 @@
 <template>
   <PageContainer title="灾毁阻断" @click-back="handleClickBack">
-    <SearchInput v-model="searchValue" placeholder="请输入地点关键词" @search="handleSearch" />
+    <SearchInput v-model="searchValue" placeholder="请输入地点关键词" @search="handleSearch">
+      <template #extra>
+        <!-- 全部按钮（激活状态） -->
+        <van-button type="default" size="small" :class="{ active: activeFilter === 'all' }" @click="activeFilter = 'all'"> 全部 </van-button>
+
+        <!-- 筛选按钮（带图标） -->
+        <van-button type="default" size="small" icon="filter-o" @click="showFilter = true"></van-button>
+      </template>
+    </SearchInput>
 
     <CurrentSite />
 
     <div class="list-panel">
-      <CardItem 
+      <CardItem v-for="(item, index) in list" :key="index" :title="item.title" @click="handleClickItem(item)">
-        v-for="(item, index) in list" 
-        :key="index" 
-        :title="item.title" 
-        @click="handleClickItem(item)"
-      >
         <template #headerExtra>
-          <span :class="['status-ball', item.status === '未解除' ? 'active' : 'resolved']"></span>
+          <!-- 使用 Vant Tag 组件显示状态 -->
+          <van-tag :type="item.status === '未解除' ? 'danger' : 'success'" plain size="medium">
+            {{ item.status }}
+          </van-tag>
         </template>
 
         <div class="info-block">
-          <div class="time-row">
+          <div class="time-box">
-            <div class="time-box">
+            <span class="info-label">发生时间：</span>
-              <span class="info-label">发生时间：</span>
+            <span class="info-value">{{ item.occurTime }}</span>
-              <span class="info-value">{{ item.occurTime }}</span>
-            </div>
-            <van-icon class="jump-icon" name="arrow" />
           </div>
           <div class="time-box">
             <span class="info-label">预计恢复时间：</span>
             <span class="info-value">{{ item.estimateRecoverTime }}</span>
           </div>
+          <!-- 使用 Vant Tag 组件显示灾毁类型 -->
+          <div class="disaster-type-wrapper">
+            <van-tag type="primary" size="medium" plain>{{ item.disasterType }}</van-tag>
+          </div>
         </div>
+
+        <!-- 使用绝对定位的箭头 -->
+        <van-icon class="jump-icon-absolute" name="arrow" />
       </CardItem>
 
       <!-- 加载状态 -->
@@ -38,23 +48,22 @@
       <!-- 空状态提示 -->
       <EmptyBox v-if="!loading && list.length === 0" :placeholder="emptyText" />
     </div>
-    
+
     <!-- 灾毁填报按钮 -->
-      <van-button type="primary" class="fab-btn" icon="plus" @click="handleAdd">
+    <van-button type="primary" class="fab-btn" icon="plus" @click="handleAdd"> 冰雪填报 </van-button>
-      冰雪填报
-    </van-button>
   </PageContainer>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { showToast } from 'vant'
+import { showToast, Tag as VanTag, Loading as VanLoading, Icon as VanIcon, Button as VanButton } from 'vant'
 import PageContainer from '@/components/PageContainer.vue'
 import SearchInput from '@/components/SearchInput.vue'
 import CardItem from '@/components/CardItem.vue'
 import EmptyBox from '@/components/EmptyBox.vue'
 import CurrentSite from '@/components/CurrentSite.vue'
+import mockDataJSON from './mockData.json'
 
 const router = useRouter()
 
@@ -73,7 +82,7 @@ const emptyText = ref('暂无相关灾毁信息')
 // 获取灾毁列表数据（后端接口）
 const getDisasterList = async (keyword = '') => {
   loading.value = true
-  
+
   try {
     // TODO: 替换为实际的后端接口地址
     const response = await fetch('/api/disaster/list', {
@@ -85,10 +94,10 @@ const getDisasterList = async (keyword = '') => {
         keyword: keyword.trim()
       })
     })
-    
+
     // 模拟接口响应格式，实际使用时根据后端返回结构调整
     // const result = await response.json()
-    
+
     // 模拟异步请求
     // if (result.code === 200) {
     //   list.value = result.data
@@ -97,52 +106,14 @@ const getDisasterList = async (keyword = '') => {
     //   showToast(result.message || '获取数据失败')
     //   list.value = []
     // }
-    
+
     // ========== 模拟数据（实际开发时删除此部分） ==========
-    await new Promise(resolve => setTimeout(resolve, 500))
+    await new Promise((resolve) => setTimeout(resolve, 500))
-    const mockData = [
+    const mockData = mockDataJSON
-      {
+
-        id: 1,
-        title: 'G242金铃乡老窖坪发生积雪',
-        status: '未解除',
-        occurTime: '2025/10/10 20:29',
-        estimateRecoverTime: '2025/10/10 20:29'
-      },
-      {
-        id: 2,
-        title: 'S521白鹿镇X发生边坡坍塌',
-        status: '已解除',
-        occurTime: '2025/10/10 20:29',
-        estimateRecoverTime: '2025/10/10 20:29'
-      },
-      {
-        id: 3,
-        title: '彭水S523发生边坡坍塌',
-        status: '未解除',
-        occurTime: '2025/10/10 20:29',
-        estimateRecoverTime: '2025/10/10 20:29'
-      },
-      {
-        id: 4,
-        title: '梁平蟠龙镇G318发生山体滑坡',
-        status: '已解除',
-        occurTime: '2025/10/10 20:29',
-        estimateRecoverTime: '2025/10/10 20:29'
-      },
-      {
-        id: 5,
-        title: '重庆市大足区XX县G201行道树倒塌',
-        status: '已解除',
-        occurTime: '2025/10/10 20:29',
-        estimateRecoverTime: '2025/10/10 20:29'
-      }
-    ]
-    
     // 模拟后端搜索过滤（实际由后端完成）
     if (keyword) {
-      const filtered = mockData.filter(item => 
+      const filtered = mockData.filter((item) => item.title.toLowerCase().includes(keyword.toLowerCase()))
-        item.title.toLowerCase().includes(keyword.toLowerCase())
-      )
       list.value = filtered
       emptyText.value = filtered.length === 0 ? '未搜索到相关灾毁信息' : '暂无相关灾毁信息'
     } else {
@@ -150,7 +121,6 @@ const getDisasterList = async (keyword = '') => {
       emptyText.value = '暂无相关灾毁信息'
     }
     // ========== 模拟数据结束 ==========
-    
   } catch (error) {
     console.error('获取灾毁列表失败:', error)
     showToast('获取数据失败，请稍后重试')
@@ -179,13 +149,14 @@ const handleClickItem = (item) => {
       title: item.title,
       status: item.status,
       occurTime: item.occurTime,
-      estimateRecoverTime: item.estimateRecoverTime
+      estimateRecoverTime: item.estimateRecoverTime,
+      disasterType: item.disasterType
     }
   })
 }
 
 // 灾毁填报
-const handleFillReport = () => {
+const handleAdd = () => {
   // TODO: 跳转到灾毁填报页面
   console.log('点击灾毁填报')
   // router.push('/disaster-report')
@@ -198,7 +169,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-
 .list-panel {
   display: flex;
   flex-direction: column;
@@ -206,16 +176,16 @@ onMounted(() => {
   padding-bottom: 80px;
 }
 
+/* CardItem 需要设置相对定位 */
+:deep(.card-item) {
+  position: relative;
+}
+
 .info-block {
   display: flex;
   flex-direction: column;
   gap: 8px;
-}
+  padding-right: 24px; /* 为箭头留出空间 */
-
-.time-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
 }
 
 .time-box {
@@ -236,27 +206,20 @@ onMounted(() => {
   color: #333333;
 }
 
-.jump-icon {
+/* 使用绝对定位的箭头样式 */
+.jump-icon-absolute {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
   font-size: 16px;
   color: rgba(102, 102, 102, 0.4);
+  cursor: pointer;
 }
 
-.status-ball {
+/* 灾毁类型标签样式 */
-  display: inline-block;
+.disaster-type-wrapper {
-  width: 10px;
+  margin-top: 4px;
-  height: 10px;
-  border-radius: 100%;
-  margin-right: 6px;
-  
-  &.active {
-    background: linear-gradient(180deg, #fd4646 0%, #fb2222 100%);
-    box-shadow: 0px 1px 4px 0px rgba(91, 8, 8, 0.34);
-  }
-  
-  &.resolved {
-    background: #52C41A;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
-  }
 }
 
 .fab-btn {
@@ -271,11 +234,10 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
   font-size: 16px;
   cursor: pointer;
   z-index: 10;
-  
+
   &:active {
     opacity: 0.9;
     transform: translateX(-50%) scale(0.98);
@@ -287,4 +249,4 @@ onMounted(() => {
   justify-content: center;
   padding: 40px 0;
 }
-</style>
+</style>

packages/mobile/src/views/DisasterManagement/mockData.json

@@ -0,0 +1,42 @@
+[
+  {
+    "id": 1,
+    "title": "G242金铃乡老窖坪发生积雪",
+    "status": "未解除",
+    "occurTime": "2025/10/10 20:29",
+    "estimateRecoverTime": "2025/10/10 20:29",
+    "disasterType": "积雪"
+  },
+  {
+    "id": 2,
+    "title": "S521白鹿镇X发生边坡坍塌",
+    "status": "已解除",
+    "occurTime": "2025/10/10 20:29",
+    "estimateRecoverTime": "2025/10/10 20:29",
+    "disasterType": "边坡坍塌"
+  },
+  {
+    "id": 3,
+    "title": "彭水S523发生边坡坍塌",
+    "status": "未解除",
+    "occurTime": "2025/10/10 20:29",
+    "estimateRecoverTime": "2025/10/10 20:29",
+    "disasterType": "路基沉陷"
+  },
+  {
+    "id": 4,
+    "title": "梁平蟠龙镇G318发生山体滑坡",
+    "status": "已解除",
+    "occurTime": "2025/10/10 20:29",
+    "estimateRecoverTime": "2025/10/10 20:29",
+    "disasterType": "山体滑坡"
+  },
+  {
+    "id": 5,
+    "title": "重庆市大足区XX县G201行道树倒塌",
+    "status": "已解除",
+    "occurTime": "2025/10/10 20:29",
+    "estimateRecoverTime": "2025/10/10 20:29",
+    "disasterType": "行道树倒塌"
+  }
+]

packages/mobile/src/views/Home.vue

@@ -100,6 +100,13 @@ const gridItems = [
       params: { data: encodeURIComponent(JSON.stringify(yhzinfo.value)) },
     },
   },
+  {
+    icon: group106Icon,
+    text: "灾害管理",
+    to: {
+      name: "DisasterManagement",
+    },
+  },
   {
     icon: group105Icon,
     text: "预警信息",