From f24ce936219da51335ef31e455d247d45e5478a7 Mon Sep 17 00:00:00 2001
From: niedongsheng <605973111@qq.com>
Date: Thu, 2 Apr 2026 15:39:27 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=B0=94=E8=B1=A1=E9=A2=84?=
 =?UTF-8?q?=E8=AD=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/mobile/src/components/CardItem.vue   |  62 +++
 .../mobile/src/components/CurrentSite.vue     |  39 ++
 packages/mobile/src/components/EmptyBox.vue   |  24 +
 .../mobile/src/components/PageContainer.vue   |  41 ++
 .../mobile/src/components/PanelHeader.vue     |  37 ++
 .../mobile/src/components/SearchInput.vue     |  98 ++++
 packages/mobile/src/router/index.js           |   7 +-
 packages/mobile/src/stores/yhzStore.js        |  29 +
 packages/mobile/src/views/Home.vue            |   3 +
 .../views/WarningMessage/WarningMessage.vue   | 433 ++++-----------
 .../WarningMessage/WarningMessageDetail.vue   | 502 +++++-------------
 .../WarningMessage/WarningMessageHandle.vue   | 185 +++++++
 12 files changed, 774 insertions(+), 686 deletions(-)
 create mode 100644 packages/mobile/src/components/CardItem.vue
 create mode 100644 packages/mobile/src/components/CurrentSite.vue
 create mode 100644 packages/mobile/src/components/EmptyBox.vue
 create mode 100644 packages/mobile/src/components/PageContainer.vue
 create mode 100644 packages/mobile/src/components/PanelHeader.vue
 create mode 100644 packages/mobile/src/components/SearchInput.vue
 create mode 100644 packages/mobile/src/stores/yhzStore.js
 create mode 100644 packages/mobile/src/views/WarningMessage/WarningMessageHandle.vue

diff --git a/packages/mobile/src/components/CardItem.vue b/packages/mobile/src/components/CardItem.vue
new file mode 100644
index 0000000..b272bac
--- /dev/null
+++ b/packages/mobile/src/components/CardItem.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="card-item">
+    <slot name="header">
+      <div class="header" :style="{marginBottom: titleGap + 'px'}">
+        <div class="header-title">{{ title }}</div>
+        <div class="header-extra" v-if="$slots.headerExtra">
+          <slot name="headerExtra"></slot>
+        </div>
+      </div>
+    </slot>
+
+    <div class="content" v-if="$slots.content" :style="{gap: contentGap + 'px'}">
+      <slot name="content"></slot>
+    </div>
+
+    <slot />
+  </div>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  titleGap: {
+    type: [Number, String],
+    default: 16
+  },
+  contentGap: {
+    type:[ Number, String],
+    default: 8
+  }
+})
+
+</script>
+<style scoped lang="scss">
+.card-item {
+  position: relative;
+  width: 100%;
+  padding: 21px 50px 17px 10px;
+  background-color: #fff;
+  border-radius: 8px;
+}
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 18px;
+}
+.header-title {
+  font-weight: 500;
+  font-size: 15px;
+  color: #4a4a4a;
+  line-height: 16px;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/packages/mobile/src/components/CurrentSite.vue b/packages/mobile/src/components/CurrentSite.vue
new file mode 100644
index 0000000..b2a1953
--- /dev/null
+++ b/packages/mobile/src/components/CurrentSite.vue
@@ -0,0 +1,39 @@
+<!-- 当前站点 -->
+<template>
+  <div class="current-site">
+    <van-icon class="position-icon" name="location-o" />
+    <span class="site-name">当前站点：{{ name || yhzStore.getYHZInfo?.mc }}</span>
+  </div>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useYHZStore } from '../stores/yhzStore';
+
+const yhzStore = useYHZStore()
+
+const props = defineProps({
+  name: {
+    type: String,
+    default: ''
+  }
+})
+
+</script>
+<style scoped lang="scss">
+.current-site {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  background-color: transparent;
+  padding: 0 5px;
+  color: #979797;
+}
+
+.position-icon {
+  margin-right: 5px;
+  font-size: 16px;
+}
+.site-name {
+  font-size: 13px;
+}
+</style>
diff --git a/packages/mobile/src/components/EmptyBox.vue b/packages/mobile/src/components/EmptyBox.vue
new file mode 100644
index 0000000..b73ba25
--- /dev/null
+++ b/packages/mobile/src/components/EmptyBox.vue
@@ -0,0 +1,24 @@
+<template>
+    <div class="empty">
+        {{ props.placeholder }}
+    </div>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue';
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: '暂无相关信息'
+  }
+});
+
+</script>
+<style scoped lang="scss">
+.empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 30px;
+}
+</style>
\ No newline at end of file
diff --git a/packages/mobile/src/components/PageContainer.vue b/packages/mobile/src/components/PageContainer.vue
new file mode 100644
index 0000000..e1e23e0
--- /dev/null
+++ b/packages/mobile/src/components/PageContainer.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="page-container">
+    <van-nav-bar title="气象预警" fixed left-arrow @click-left="onClickLeft" />
+    <div class="page-content-wrapper">
+      <slot></slot>
+    </div>
+    <div v-if="$slots.footer" class="page-footer-wrapper"><slot name="footer" /></div>
+  </div>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue'
+
+const emit = defineEmits(['back'])
+
+const onClickLeft = () => {
+  emit('click-back')
+}
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
+  padding-left: 8px;
+  padding-right: 8px;
+  width: 100dvw;
+  height: 100dvh;
+  background-color: #f6f6f7;
+}
+
+.page-content-wrapper {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+}
+.page-footer-wrapper {
+    padding-top: 10px;
+    flex-shrink: 0;
+}
+</style>
diff --git a/packages/mobile/src/components/PanelHeader.vue b/packages/mobile/src/components/PanelHeader.vue
new file mode 100644
index 0000000..29824cf
--- /dev/null
+++ b/packages/mobile/src/components/PanelHeader.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="panel-header">
+    <span class="icon"></span>
+    <span class="title-text">{{ title }}</span>
+  </div>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+<style scoped lang="scss">
+.panel-header { 
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.icon {
+  display: inline-block;
+  width: 5px;
+  height: 18px;
+  background: linear-gradient(180deg, #91c4f1 0%, #5892e0 100%);
+  border-radius: 2px;
+  margin-right: 4px;
+}
+.title-text {
+  font-weight: 500;
+  font-size: 16px;
+  color: #4a4a4a;
+  line-height: 16px;
+}
+</style>
diff --git a/packages/mobile/src/components/SearchInput.vue b/packages/mobile/src/components/SearchInput.vue
new file mode 100644
index 0000000..711cfaf
--- /dev/null
+++ b/packages/mobile/src/components/SearchInput.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="search-input">
+    <div class="input-wrapper">
+      <div class="input-block">
+        <van-icon class="search-icon" name="search" />
+        <input class="inner-input" v-model="modelValue" :placeholder="placeholder" />
+        <van-icon class="close-icon" name="clear" v-if="modelValue !== ''" @click="modelValue = ''" />
+      </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'
+
+const modelValue = defineModel('modelValue')
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: '请输入关键词'
+  }
+})
+</script>
+<style scoped lang="scss">
+.search-input {
+  position: relative;
+  height: 40px;
+  width: 100%;
+  margin-top: 8px;
+  box-sizing: border-box;
+}
+
+.input-wrapper {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 4px;
+}
+
+.input-block {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 20px;
+  box-sizing: border-box;
+
+  .search-icon, .close-icon {
+    position: absolute;
+    top: 50%;
+    left: 20px;
+    transform: translateY(-50%);
+    font-size: 20px;
+    color: #9b9b9b;
+  }
+  .close-icon {
+    left: unset;
+    right: 20px;
+  }
+}
+
+.inner-input {
+  outline: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  text-align: center;
+  font-size: 14px;
+}
+
+.placeholder-block {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+
+  .search-icon {
+    font-size: 20px;
+    margin-right: 3px;
+    color: #9b9b9b;
+  }
+
+  .placeholder-text {
+    color: #9b9b9b;
+  }
+}
+</style>
diff --git a/packages/mobile/src/router/index.js b/packages/mobile/src/router/index.js
index 61416b8..1b4d621 100644
--- a/packages/mobile/src/router/index.js
+++ b/packages/mobile/src/router/index.js
@@ -72,10 +72,15 @@ const routes = [
     component: () => import('../views/WarningMessage/WarningMessage.vue')
   },
   {
-    path: '/warningMessage-detail/:data',
+    path: '/warningMessage-detail',
     name: 'WarningMessageDetail',
     component: () => import('../views/WarningMessage/WarningMessageDetail.vue')
   },
+  {
+    path: '/warningMessageHandle',
+    name: 'WarningMessageHandle',
+    component: () => import('../views/WarningMessage/WarningMessageHandle.vue')
+  }
 ]
 
 const router = createRouter({
diff --git a/packages/mobile/src/stores/yhzStore.js b/packages/mobile/src/stores/yhzStore.js
new file mode 100644
index 0000000..c5ed0e4
--- /dev/null
+++ b/packages/mobile/src/stores/yhzStore.js
@@ -0,0 +1,29 @@
+import { defineStore } from 'pinia'
+
+export const useYHZStore = defineStore('config', {
+  state: () => ({
+    yhzInfo: null
+  }),
+  getters: {
+    getYHZInfo: (state) => {
+      if(state.yhzInfo) {
+        return state.yhzInfo
+      }
+      try {
+        const yhzInfo = JSON.parse(localStorage.getItem('yhzInfo'))
+        if(yhzInfo) {
+          return yhzInfo
+        }
+      } catch (error) {
+        console.log(error)
+
+      }
+    }
+  },
+  actions: {
+    setYHZInfo(yhzInfo) {
+      this.yhzInfo = yhzInfo
+      localStorage.setItem('yhzInfo', JSON.stringify(yhzInfo))
+    }
+  }
+})
diff --git a/packages/mobile/src/views/Home.vue b/packages/mobile/src/views/Home.vue
index 04db5c4..dff73dd 100644
--- a/packages/mobile/src/views/Home.vue
+++ b/packages/mobile/src/views/Home.vue
@@ -77,11 +77,13 @@ import "vant/es/toast/style";
 import "vant/es/popup/style";
 import { ref, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
+import { useYHZStore } from "../stores/yhzStore";
 import { showToast } from "vant";
 import { request } from "../../../shared/utils/request";
 
 const router = useRouter();
 const yhzinfo = ref({});
+const yhzStore = useYHZStore();
 
 const route = useRoute();
 const token = route.query.token;
@@ -96,6 +98,7 @@ const getYHZinfo = async () => {
     });
     if (res.code === "00000") {
       yhzinfo.value = res.data[0];
+      yhzStore.setYHZInfo(res.data[0]);
     } else {
       throw new Error(res.message);
     }
diff --git a/packages/mobile/src/views/WarningMessage/WarningMessage.vue b/packages/mobile/src/views/WarningMessage/WarningMessage.vue
index 34069b8..a32a7ac 100644
--- a/packages/mobile/src/views/WarningMessage/WarningMessage.vue
+++ b/packages/mobile/src/views/WarningMessage/WarningMessage.vue
@@ -1,360 +1,145 @@
 <template>
-  <div class="warning-message-page">
-    <!-- 顶部导航栏 -->
-    <div class="nav-bar">
-      <div class="back-btn" @click="goBack">
-        <van-icon name="arrow-left" />
-      </div>
-      <div class="title">气象预警</div>
-      <div class="placeholder"></div>
-    </div>
+  <PageContainer title="气象预警" @click-back="handleClickBack">
+    <SearchInput v-model="searchValue" />
 
-    <!-- 搜索栏 -->
-    <div class="search-section">
-      <div class="search-box">
-        <span class="search-text">关键词</span>
-        <van-icon name="search" class="search-icon" />
-      </div>
-    </div>
+    <CurrentSite />
 
-    <!-- 当前站点 -->
-    <div class="current-site">
-      <span class="site-label">当前站点：</span>
-      <span class="site-name">{{ currentSite }}</span>
-    </div>
+    <div class="list-panel">
+      <CardItem v-for="(item, index) in list" :key="index" :title="item.area" @click="handleClickItem(item)">
+        <template #headerExtra>
+          <span class="red-ball"></span>
+        </template>
 
-    <!-- 预警列表 -->
-    <div class="warning-list">
-      <div
-        v-for="(item, index) in warningList"
-        :key="index"
-        class="warning-item"
-        :class="{ unread: !item.isRead }"
-        @click="viewDetail(item)"
-      >
-        <div class="item-content">
-          <div class="warning-title">{{ item.title }}</div>
-          <div class="warning-time">
-            <span class="time-label">发布时间：</span>
-            <span class="time-value">{{ item.publishTime }}</span>
+        <!-- 发布时间 block -->
+        <div class="time-block">
+          <div class="time-box">
+            <span class="time-label-text">发布时间：</span>
+            <span class="time-value-text">{{ item.publishTime }}</span>
           </div>
+          <van-icon class="jump-icon" name="arrow" />
         </div>
-        <div class="item-right">
-          <div v-if="!item.isRead" class="unread-dot"></div>
-          <van-icon name="arrow" class="arrow-icon" />
-        </div>
-      </div>
-    </div>
+      </CardItem>
 
-    <!-- 空状态 -->
-    <div v-if="warningList.length === 0" class="empty-state">
-      <van-icon name="warning-o" class="empty-icon" />
-      <div class="empty-text">暂无预警消息</div>
+      <!-- 空状态提示 -->
+      <EmptyBox v-if="list.length === 0" placeholder="暂无相关预警信息" />
     </div>
-  </div>
+  </PageContainer>
 </template>
 
 <script setup>
-import { ref } from "vue";
-import { useRouter, useRoute } from "vue-router";
+import { ref, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import PageContainer from '@/components/PageContainer.vue'
+import SearchInput from '@/components/SearchInput.vue'
+import CurrentSite from '@/components/CurrentSite.vue'
+import CardItem from '@/components/CardItem.vue'
+import EmptyBox from '@/components/EmptyBox.vue'
 
-const router = useRouter();
-const route = useRoute();
+const router = useRouter()
 
-// 当前站点
-const currentSite = ref("李家坝仓库");
+onMounted(() => {
+  getData()
+})
 
-// 解析传递的站点信息
-const initSiteInfo = () => {
-  const { data } = route.params;
-  if (data) {
-    try {
-      const yhzinfo = JSON.parse(decodeURIComponent(data));
-      currentSite.value = yhzinfo.mc || "李家坝仓库";
-    } catch (e) {
-      console.error("解析站点信息失败", e);
+// 搜索关键词
+const searchValue = ref('')
+
+watch(
+  () => searchValue.value,
+  (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+      getData(newVal)
     }
   }
-};
+)
+
 
-initSiteInfo();
 
 // 预警列表数据
-const warningList = ref([
+const list = ref([
   {
-    id: 1,
-    title: "合川区暴雨红色预警",
-    publishTime: "2025/10/10 20:29",
-    isRead: false,
-    level: "red",
-    type: "rain",
+    area: '合川区',
+    level: '红色气象预警',
+    publishTime: '2026/01/10 20:29'
   },
   {
-    id: 2,
-    title: "合川区红色气象预警",
-    publishTime: "2025/10/09 20:29",
-    isRead: true,
-    level: "red",
-    type: "weather",
+    area: '万州区',
+    level: '红色气象预警',
+    publishTime: '2025/10/10 20:29'
   },
-]);
+  {
+    area: '涪陵区',
+    level: '红色气象预警',
+    publishTime: '2025/10/10 20:29'
+  }
+])
 
-// 返回上一页
-const goBack = () => {
-  router.back();
-};
+const getData = async () => {
 
-// 查看详情
-const viewDetail = (item) => {
-  // 标记为已读
-  item.isRead = true;
-  // 跳转到详情页
+}
+
+const handleClickItem = (item) => {
   router.push({
-    name: "WarningMessageDetail",
-    params: {
-      id: item.id,
-      data: route.params.data,
-    },
-  });
-};
+    path: '/warningMessage-detail',
+    
+  })
+}
+
+const handleClickBack = () => {
+  router.push('/')
+}
 </script>
 
 <style lang="scss" scoped>
-// 移动端适配变量
-$primary-color: #409eff;
-$text-color: #333;
-$text-secondary: #666;
-$text-tertiary: #999;
-$bg-color: #f5f5f5;
-$border-color: #e0e0e0;
-$unread-color: #f56c6c;
-
-.warning-message-page {
-  min-height: 100vh;
-  background-color: $bg-color;
-  padding-bottom: 20px;
-
-  // 顶部导航栏
-  .nav-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 44px;
-    background-color: #fff;
-    padding: 0 15px;
-    position: sticky;
-    top: 0;
-    z-index: 100;
-
-    .back-btn {
-      width: 40px;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      color: $text-color;
-      font-size: 20px;
-    }
-
-    .title {
-      flex: 1;
-      text-align: center;
-      font-size: 17px;
-      font-weight: 500;
-      color: $text-color;
-    }
-
-    .placeholder {
-      width: 40px;
-    }
-  }
-
-  // 搜索栏
-  .search-section {
-    padding: 12px 15px;
-    background-color: #fff;
-
-    .search-box {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      height: 36px;
-      background-color: #e8e8e8;
-      border-radius: 18px;
-      padding: 0 15px;
-
-      .search-text {
-        font-size: 14px;
-        color: $text-tertiary;
-      }
-
-      .search-icon {
-        font-size: 18px;
-        color: $text-tertiary;
-      }
-    }
-  }
-
-  // 当前站点
-  .current-site {
-    padding: 10px 15px;
-    background-color: #fff;
-    text-align: center;
-    font-size: 13px;
-    border-bottom: 1px solid $border-color;
-
-    .site-label {
-      color: $text-secondary;
-    }
-
-    .site-name {
-      color: $primary-color;
-    }
-  }
-
-  // 预警列表
-  .warning-list {
-    padding: 10px 15px;
-
-    .warning-item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      background-color: #fff;
-      border-radius: 8px;
-      padding: 15px;
-      margin-bottom: 10px;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-
-      &:active {
-        background-color: #f9f9f9;
-      }
-
-      .item-content {
-        flex: 1;
-        min-width: 0;
-
-        .warning-title {
-          font-size: 15px;
-          font-weight: 500;
-          color: $text-color;
-          margin-bottom: 8px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-
-        .warning-time {
-          font-size: 12px;
-          color: $text-tertiary;
-
-          .time-label {
-            color: $text-secondary;
-          }
-        }
-      }
-
-      .item-right {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        margin-left: 10px;
-
-        .unread-dot {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          background-color: $unread-color;
-          flex-shrink: 0;
-        }
-
-        .arrow-icon {
-          font-size: 16px;
-          color: $text-tertiary;
-          flex-shrink: 0;
-        }
-      }
-
-      // 未读状态样式
-      &.unread {
-        .warning-title {
-          font-weight: 600;
-        }
-      }
-    }
-  }
-
-  // 空状态
-  .empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 60px 20px;
-
-    .empty-icon {
-      font-size: 48px;
-      color: $text-tertiary;
-      margin-bottom: 12px;
-    }
-
-    .empty-text {
-      font-size: 14px;
-      color: $text-secondary;
-    }
-  }
+/* ==================== Panel 层级 ==================== */
+.list-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
-// 适配 iPhone 刘海屏
-@supports (padding-top: env(safe-area-inset-top)) {
-  .warning-message-page {
-    .nav-bar {
-      padding-top: env(safe-area-inset-top);
-      height: calc(44px + env(safe-area-inset-top));
-    }
-  }
+.card-item {
+  padding-right: 15px;
 }
 
-// 适配不同屏幕尺寸
-@media screen and (max-width: 320px) {
-  .warning-message-page {
-    .warning-list {
-      .warning-item {
-        .item-content {
-          .warning-title {
-            font-size: 14px;
-          }
-        }
-      }
-    }
-  }
+/* ==================== Block 层级 ==================== */
+.time-block {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
-@media screen and (min-width: 414px) {
-  .warning-message-page {
-    .nav-bar {
-      height: 48px;
-
-      .title {
-        font-size: 18px;
-      }
-    }
-
-    .warning-list {
-      .warning-item {
-        padding: 18px;
-
-        .item-content {
-          .warning-title {
-            font-size: 16px;
-          }
-
-          .warning-time {
-            font-size: 13px;
-          }
-        }
-      }
-    }
-  }
+/* ==================== Box 层级 ==================== */
+.time-box {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
 }
-</style>
+
+/* ==================== Text / Num 层级 ==================== */
+.red-ball {
+  display: inline-block;
+  width: 13px;
+  height: 13px;
+  background: linear-gradient(180deg, #fd4646 0%, #fb2222 100%);
+  box-shadow: 0px 1px 4px 0px rgba(91, 8, 8, 0.34);
+  border-radius: 100%;
+}
+
+.jump-icon {
+  font-size: 16px;
+  color: rgb(102, 102, 102, .4);
+}
+
+.time-label-text {
+  font-weight: 400;
+  font-size: 14px;
+  color: #666666;
+}
+
+.time-value-text {
+  font-weight: 400;
+  font-size: 14px;
+  color: #666666;
+}
+</style>
\ No newline at end of file
diff --git a/packages/mobile/src/views/WarningMessage/WarningMessageDetail.vue b/packages/mobile/src/views/WarningMessage/WarningMessageDetail.vue
index 4397a0e..12c0d22 100644
--- a/packages/mobile/src/views/WarningMessage/WarningMessageDetail.vue
+++ b/packages/mobile/src/views/WarningMessage/WarningMessageDetail.vue
@@ -1,395 +1,175 @@
 <template>
-  <div class="warning-detail-page">
-    <!-- 顶部导航栏 -->
-    <div class="nav-bar">
-      <div class="back-btn" @click="goBack">
-        <van-icon name="arrow-left" />
-      </div>
-      <div class="title">气象预警</div>
-      <div class="placeholder"></div>
+  <PageContainer class="page-container" title="预警详情" @click-back="handleClickBack">
+    <CurrentSite  />
+
+    <PanelHeader title="气象预警" />
+    <div class="list-panel margin">
+      <CardItem class="card-item" v-for="(item, index) in list" :key="index" :title="item.area" titleGap="10">
+        <template #content>
+          <div class="time-block">
+            <div class="time-box">
+              <span class="time-label-text">发布时间：</span>
+              <span class="time-value-text">{{ item.publishTime }}</span>
+            </div>
+          </div>
+          <div class="desc-block">
+            <div class="desc-text">{{ item.content }}</div>
+          </div>
+
+          <van-icon class="jump-icon" name="arrow" />
+        </template>
+      </CardItem>
+
+      <!-- 空状态提示 -->
+      <EmptyBox v-if="list.length === 0" placeholder="暂无相关预警信息" />
     </div>
 
-    <!-- 当前站点 -->
-    <div class="current-site">
-      <span class="site-label">当前站点：</span>
-      <span class="site-name">{{ currentSite }}</span>
-    </div>
-
-    <!-- 预警详情内容 -->
-    <div class="detail-content" v-if="warningDetail">
-      <!-- 预警标题区域 -->
-      <div class="warning-header">
-        <div class="header-title">气象预警</div>
-      </div>
-
-      <!-- 预警信息卡片 -->
-      <div class="info-card">
-        <div class="warning-name">{{ warningDetail.title }}</div>
-        <div class="publish-time">
-          <span class="time-label">发布时间：</span>
-          <span class="time-value">{{ warningDetail.publishTime }}</span>
+    <PanelHeader title="防御措施" />
+    <div class="list-panel">
+      <CardItem v-for="(item, index) in list" :key="index" :title="item.area">
+        <div class="method-block">
+          <div class="method-text">{{ item.method }}</div>
         </div>
-      </div>
+        <van-icon class="jump-icon" name="arrow" />
+      </CardItem>
 
-      <!-- 预警描述 -->
-      <div class="description-card">
-        <div class="desc-text">{{ warningDetail.description }}</div>
-      </div>
-
-      <!-- 防御措施 -->
-      <div class="measures-section">
-        <div class="section-title">防御措施</div>
-        <div class="measures-card">
-          <div class="measures-text">{{ warningDetail.measures }}</div>
-        </div>
-      </div>
+      <!-- 空状态提示 -->
+      <EmptyBox v-if="list.length === 0" placeholder="暂无相关防御措施" />
     </div>
 
-    <!-- 底部按钮 -->
-    <div class="bottom-action">
-      <van-button type="primary" block round @click="handleResponse">
-        立即响应
-      </van-button>
+    <div class="footer-panel">
+      <van-button block type="primary" @click="handleClickBack()">我已知晓</van-button>
+      <van-button block type="primary" @click="goToHandle()">我要响应</van-button>
     </div>
-  </div>
+  </PageContainer>
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { showToast } from "vant";
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import PageContainer from '@/components/PageContainer.vue'
+import CurrentSite from '@/components/CurrentSite.vue'
+import PanelHeader from '@/components/PanelHeader.vue'
+import CardItem from '@/components/CardItem.vue'
+import EmptyBox from '@/components/EmptyBox.vue'
 
-const route = useRoute();
-const router = useRouter();
-
-// 当前站点
-const currentSite = ref("李家坝仓库");
-
-// 预警详情数据
-const warningDetail = ref({
-  id: 1,
-  title: "合川区暴雨红色预警",
-  publishTime: "2025/10/10 20:29",
-  description:
-    "区气象台发布暴雨红色预警，按照相关要求，启动I级防御响应，并请及时关注地质、水文等风险提示信息，落实主动封闭管控/“关停撤转”措施",
-  measures:
-    "请立即按照2小时一次频率对你管养的重点路段/重点部位进行巡查，重点巡查较高及以上风险路段、涉灾隐患点、地质条件复杂路段、临河临崖路段/两区三厂、大型设施设备、取弃土（渣）场、砂石料场、涉水桥梁、富水隧道、围堰、支架脚手架、高切坡、滑坡处置等部位，重点关注涉水桥梁基础及墩台、不良地质隧道、隧道洞口边仰坡及侧切结构、高陡边坡支挡防护以及防排水设施，发现异常情况，立即向上报告，采取紧急排危、告警阻拦、吹哨撤转等措施，并及时报送工作开展情况。",
-  level: "red",
-  type: "rain",
-});
-
-// 返回上一页
-const goBack = () => {
-  router.back();
-};
-
-// 立即响应
-const handleResponse = () => {
-  showToast({
-    message: "响应成功",
-    type: "success",
-  });
-  // 实际项目中调用API提交响应
-  console.log("立即响应", warningDetail.value);
-};
+const router = useRouter()
 
 onMounted(() => {
-  // 从路由参数获取预警ID，然后请求详情数据
-  const { id } = route.params;
-  if (id) {
-    console.log("获取预警详情 ID:", id);
-    // 实际项目中调用API获取详情
-    // fetchWarningDetail(id);
-  }
+  getData()
+})
 
-  // 解析传递的站点信息
-  const { data } = route.params;
-  if (data) {
-    try {
-      const yhzinfo = JSON.parse(decodeURIComponent(data));
-      currentSite.value = yhzinfo.mc || "李家坝仓库";
-    } catch (e) {
-      console.error("解析站点信息失败", e);
-    }
+// 列表数据
+const list = ref([
+  {
+    area: '合川区',
+    level: '红色气象预警',
+    content: '今天，北京将进入大雪，请做好',
+    publishTime: '2026/01/10 20:29',
+    method: '立即启动防汛Ⅰ级应急响应，立即转移危险区'
+  },
+  {
+    area: '万州区',
+    level: '红色气象预警',
+    publishTime: '2025/10/10 20:29',
+    method: '立即启动防汛Ⅰ级应急响应，立即转移危险区'
+  },
+  {
+    area: '涪陵区',
+    level: '红色气象预警',
+    publishTime: '2025/10/10 20:29',
+    method: '立即启动防汛Ⅰ级应急响应，立即转移危险区'
   }
-});
+])
+
+const getData = async () => {}
+
+const handleClickBack = () => {
+  router.go(-1)
+}
+const goToHandle = () => {
+  router.push({path: '/warningMessageHandle'})
+}
 </script>
 
 <style lang="scss" scoped>
-// 移动端适配变量
-$primary-color: #1989fa;
-$text-color: #333;
-$text-secondary: #666;
-$text-tertiary: #999;
-$bg-color: #f5f5f5;
-$border-color: #e0e0e0;
-$card-bg: #fff;
-$section-title-color: #666;
+.page-container {
+  position: relative;
+  padding-bottom: 74px;
+}
 
-.warning-detail-page {
-  min-height: 100vh;
-  background-color: $bg-color;
-  padding-bottom: 80px;
+/* ==================== Panel 层级 ==================== */
+.list-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 
-  // 顶部导航栏
-  .nav-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 44px;
-    background-color: #fff;
-    padding: 0 15px;
-    position: sticky;
-    top: 0;
-    z-index: 100;
-
-    .back-btn {
-      width: 40px;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      color: $text-color;
-      font-size: 20px;
-    }
-
-    .title {
-      flex: 1;
-      text-align: center;
-      font-size: 17px;
-      font-weight: 500;
-      color: $text-color;
-    }
-
-    .placeholder {
-      width: 40px;
-    }
-  }
-
-  // 当前站点
-  .current-site {
-    padding: 10px 15px;
-    background-color: #fff;
-    text-align: center;
-    font-size: 13px;
-    border-bottom: 1px solid $border-color;
-
-    .site-label {
-      color: $text-secondary;
-    }
-
-    .site-name {
-      color: $primary-color;
-    }
-  }
-
-  // 详情内容
-  .detail-content {
-    padding: 15px;
-
-    // 预警标题区域
-    .warning-header {
-      margin-bottom: 12px;
-
-      .header-title {
-        font-size: 16px;
-        font-weight: 600;
-        color: $text-color;
-        position: relative;
-        padding-left: 12px;
-
-        &::before {
-          content: "";
-          position: absolute;
-          left: 0;
-          top: 50%;
-          transform: translateY(-50%);
-          width: 4px;
-          height: 16px;
-          background-color: $primary-color;
-          border-radius: 2px;
-        }
-      }
-    }
-
-    // 信息卡片
-    .info-card {
-      background-color: $card-bg;
-      border-radius: 8px;
-      padding: 15px;
-      margin-bottom: 12px;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-
-      .warning-name {
-        font-size: 16px;
-        font-weight: 600;
-        color: $text-color;
-        margin-bottom: 10px;
-        line-height: 1.4;
-      }
-
-      .publish-time {
-        font-size: 13px;
-        color: $text-tertiary;
-
-        .time-label {
-          color: $text-secondary;
-        }
-      }
-    }
-
-    // 描述卡片
-    .description-card {
-      background-color: $card-bg;
-      border-radius: 8px;
-      padding: 15px;
-      margin-bottom: 12px;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-
-      .desc-text {
-        font-size: 14px;
-        color: $text-secondary;
-        line-height: 1.8;
-        text-align: justify;
-      }
-    }
-
-    // 防御措施区域
-    .measures-section {
-      .section-title {
-        font-size: 16px;
-        font-weight: 600;
-        color: $text-color;
-        margin-bottom: 12px;
-        position: relative;
-        padding-left: 12px;
-
-        &::before {
-          content: "";
-          position: absolute;
-          left: 0;
-          top: 50%;
-          transform: translateY(-50%);
-          width: 4px;
-          height: 16px;
-          background-color: $primary-color;
-          border-radius: 2px;
-        }
-      }
-
-      .measures-card {
-        background-color: $card-bg;
-        border-radius: 8px;
-        padding: 15px;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-
-        .measures-text {
-          font-size: 14px;
-          color: $text-secondary;
-          line-height: 1.8;
-          text-align: justify;
-        }
-      }
-    }
-  }
-
-  // 底部按钮
-  .bottom-action {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    padding: 10px 15px 20px;
-    background-color: #fff;
-    border-top: 1px solid $border-color;
-
-    .van-button {
-      height: 44px;
-      font-size: 16px;
-    }
+  &.margin {
+    margin-bottom: 20px;
   }
 }
 
-// 适配 iPhone 刘海屏
-@supports (padding-top: env(safe-area-inset-top)) {
-  .warning-detail-page {
-    .nav-bar {
-      padding-top: env(safe-area-inset-top);
-      height: calc(44px + env(safe-area-inset-top));
-    }
-
-    .bottom-action {
-      padding-bottom: calc(20px + env(safe-area-inset-bottom));
-    }
-  }
+.footer-panel {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 64px;
+  background: #ffffff;
+  box-shadow: 0px -5px 12px 0px rgba(200, 200, 200, 0.37);
+  opacity: 0.97;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0 16px;
 }
 
-// 适配不同屏幕尺寸
-@media screen and (max-width: 320px) {
-  .warning-detail-page {
-    .detail-content {
-      .info-card {
-        .warning-name {
-          font-size: 15px;
-        }
-      }
-
-      .description-card,
-      .measures-section {
-        .desc-text,
-        .measures-text {
-          font-size: 13px;
-        }
-      }
-    }
-  }
+/* ==================== Block 层级 ==================== */
+.time-block {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
-@media screen and (min-width: 414px) {
-  .warning-detail-page {
-    .nav-bar {
-      height: 48px;
+/* ==================== Box 层级 ==================== */
+.time-box {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+}
 
-      .title {
-        font-size: 18px;
-      }
-    }
+/* ==================== Text 层级 ==================== */
 
-    .detail-content {
-      .warning-header {
-        .header-title {
-          font-size: 17px;
-        }
-      }
+.jump-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 15px;
+  font-size: 16px;
+  color: rgb(102, 102, 102, 0.4);
+}
 
-      .info-card {
-        padding: 18px;
+.time-label-text {
+  font-weight: 400;
+  font-size: 14px;
+  color: #999999;
+}
 
-        .warning-name {
-          font-size: 17px;
-        }
-
-        .publish-time {
-          font-size: 14px;
-        }
-      }
-
-      .description-card,
-      .measures-card {
-        padding: 18px;
-
-        .desc-text,
-        .measures-text {
-          font-size: 15px;
-        }
-      }
-
-      .measures-section {
-        .section-title {
-          font-size: 17px;
-        }
-      }
-    }
-  }
+.time-value-text {
+  font-weight: 400;
+  font-size: 14px;
+  color: #999999;
+}
+.desc-text {
+  font-weight: 400;
+  font-size: 14px;
+  color: #666666;
+  line-height: 13px;
+}
+.method-text {
+  font-weight: 500;
+  font-size: 15px;
+  color: #4a4a4a;
+  line-height: 20px;
 }
 </style>
diff --git a/packages/mobile/src/views/WarningMessage/WarningMessageHandle.vue b/packages/mobile/src/views/WarningMessage/WarningMessageHandle.vue
new file mode 100644
index 0000000..fd7e8ce
--- /dev/null
+++ b/packages/mobile/src/views/WarningMessage/WarningMessageHandle.vue
@@ -0,0 +1,185 @@
+<template>
+  <PageContainer class="page-container" title="预警详情" @click-back="handleClickBack">
+    <CurrentSite />
+
+    <div class="form-panel">
+      <van-field v-model="value" label="现场情况描述" placeholder="请输入备注" label-align="top" rows="3" type="textarea" />
+
+      <van-field class="mt-8" v-model="value" label="备注(非必填)" placeholder="请填写" input-align="right" />
+
+      <div class="image-upload-block">
+        <div class="label-box">
+          <span class="main-text">现场照片</span>
+          <span class="sub-text">最多上传6张</span>
+        </div>
+        <div class="com-">
+          <van-uploader
+            v-model="fileList"
+            @delete="handleDelete"
+            name="photos"
+            :file-list="fileList"
+            :file-type="['image/jpeg', 'image/png']"
+            :after-read="afterRead"
+            multiple
+            :max-count="6"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="footer-panel">
+      <van-button block type="primary" @click="confirm()">确认</van-button>
+    </div>
+  </PageContainer>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import PageContainer from '@/components/PageContainer.vue'
+import CurrentSite from '@/components/CurrentSite.vue'
+import { showToast, showLoadingToast, showImagePreview } from 'vant'
+
+const router = useRouter()
+
+// 上传附件相关
+const fileList = ref([])
+
+onMounted(() => {
+  getData()
+})
+
+// 列表数据
+const list = ref([
+  {
+    area: '合川区',
+    level: '红色气象预警',
+    content: '今天，北京将进入大雪，请做好',
+    publishTime: '2026/01/10 20:29',
+    method: '立即启动防汛Ⅰ级应急响应，立即转移危险区'
+  },
+  {
+    area: '万州区',
+    level: '红色气象预警',
+    publishTime: '2025/10/10 20:29',
+    method: '立即启动防汛Ⅰ级应急响应，立即转移危险区'
+  },
+  {
+    area: '涪陵区',
+    level: '红色气象预警',
+    publishTime: '2025/10/10 20:29',
+    method: '立即启动防汛Ⅰ级应急响应，立即转移危险区'
+  }
+])
+
+// 文件删除
+const handleDelete = (file) => {
+  if (file.serverUrl) {
+    const index = editForm.photos.findIndex((p) => p.photoUrl === file.serverUrl)
+    if (index !== -1) {
+      editForm.photos.splice(index, 1)
+    }
+  }
+}
+
+// 文件上传
+const afterRead = async (file) => {
+  const toast = showLoadingToast({
+    message: '上传中...',
+    forbidClick: true,
+    duration: 0 // 设置为0表示不会自动关闭
+  })
+  try {
+    const formData = new FormData()
+    formData.append('file', file.file)
+    const res = await request({
+      url: '/snow-ops-platform/file/upload',
+      method: 'post',
+      data: formData
+    })
+    toast.close()
+    if (res.code === '00000') {
+      editForm.photos.push({ photoUrl: res.data })
+      const index = fileList.value.findIndex((f) => f.file === file.file)
+      if (index !== -1) {
+        fileList.value[index].serverUrl = res.data
+      }
+
+      console.log('editForm.photos', toRaw(editForm.photos))
+      console.log('fileList.value', fileList.value)
+    } else {
+      throw new Error(res.message)
+    }
+  } catch (error) {
+    toast.close()
+    showToast({
+      type: 'fail',
+      message: error.message
+    })
+  }
+}
+
+const getData = async () => {}
+
+const handleClickBack = () => {
+  router.go(-1)
+}
+const confirm = () => {
+  router.push({ path: '/warningMessageHandle' })
+}
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  position: relative;
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 74px;
+}
+
+.mt-8 {
+  margin-top: 8px;
+}
+
+/* ==================== Panel 层级 ==================== */
+
+.footer-panel {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 64px;
+  background: #ffffff;
+  box-shadow: 0px -5px 12px 0px rgba(200, 200, 200, 0.37);
+  opacity: 0.97;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0 16px;
+}
+
+.image-upload-block {
+  background-color: #fff;
+  padding: 16px;
+
+  .label-box {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  .main-text {
+    font-weight: 600;
+    font-size: 15px;
+    color: #4a4a4a;
+    line-height: 16px;
+    margin-right: 2px;
+  }
+  .sub-text {
+    font-weight: 400;
+    font-size: 12px;
+    color: #4a4a4a;
+    line-height: 17px;
+  }
+}
+</style>

From b7c1a2e23165413c8e8b0286f36b26f62899d13d Mon Sep 17 00:00:00 2001
From: niedongsheng <605973111@qq.com>
Date: Thu, 2 Apr 2026 16:20:33 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/mobile/src/assets/images/组 104.png  | Bin 0 -> 2392 bytes
 .../mobile/src/assets/images/组 105(1).png    | Bin 0 -> 1799 bytes
 packages/mobile/src/assets/images/组 105.png  | Bin 0 -> 2149 bytes
 packages/mobile/src/assets/images/组 106.png  | Bin 0 -> 3012 bytes
 packages/mobile/src/assets/images/组 63.png   | Bin 0 -> 2202 bytes
 packages/mobile/src/router/index.js           |   2 +-
 packages/mobile/src/views/Home.vue            | 160 +++++++++++-------
 .../WarningMessage/WarningMessageHandle.vue   |  47 ++---
 8 files changed, 117 insertions(+), 92 deletions(-)
 create mode 100644 packages/mobile/src/assets/images/组 104.png
 create mode 100644 packages/mobile/src/assets/images/组 105(1).png
 create mode 100644 packages/mobile/src/assets/images/组 105.png
 create mode 100644 packages/mobile/src/assets/images/组 106.png
 create mode 100644 packages/mobile/src/assets/images/组 63.png

diff --git a/packages/mobile/src/assets/images/组 104.png b/packages/mobile/src/assets/images/组 104.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa4320935e96fa2be830f4c98a02ab39097ed9ba
GIT binary patch
literal 2392
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
KMNUMnLSTZ*#H7vu

literal 0
HcmV?d00001

diff --git a/packages/mobile/src/assets/images/组 105(1).png b/packages/mobile/src/assets/images/组 105(1).png
new file mode 100644
index 0000000000000000000000000000000000000000..fd55a39a14a263f57332cf67abc3fa3109e845d6
GIT binary patch
literal 1799
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

literal 0
HcmV?d00001

diff --git a/packages/mobile/src/assets/images/组 105.png b/packages/mobile/src/assets/images/组 105.png
new file mode 100644
index 0000000000000000000000000000000000000000..9b79de36bd61c8fdb22af12351d99aa6a656a96b
GIT binary patch
literal 2149
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
bK~w_(MVAxRb)pL000000NkvXXu0mjfyjUZm

literal 0
HcmV?d00001

diff --git a/packages/mobile/src/assets/images/组 106.png b/packages/mobile/src/assets/images/组 106.png
new file mode 100644
index 0000000000000000000000000000000000000000..2459003c840e148debfc4a325e8ff5806fab807a
GIT binary patch
literal 3012
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
GLSTa3_vb+X

literal 0
HcmV?d00001

diff --git a/packages/mobile/src/assets/images/组 63.png b/packages/mobile/src/assets/images/组 63.png
new file mode 100644
index 0000000000000000000000000000000000000000..b4102b5d8854ae92a40238e9ea1a416c39235f73
GIT binary patch
literal 2202
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

literal 0
HcmV?d00001

diff --git a/packages/mobile/src/router/index.js b/packages/mobile/src/router/index.js
index 1b4d621..9222cb0 100644
--- a/packages/mobile/src/router/index.js
+++ b/packages/mobile/src/router/index.js
@@ -67,7 +67,7 @@ const routes = [
     component: () => import('../views/IceEvent/IceEventDetails.vue')
   },
   {
-    path: '/warningMessage/:data',
+    path: '/warningMessage',
     name: 'WarningMessage',
     component: () => import('../views/WarningMessage/WarningMessage.vue')
   },
diff --git a/packages/mobile/src/views/Home.vue b/packages/mobile/src/views/Home.vue
index dff73dd..2f54a4e 100644
--- a/packages/mobile/src/views/Home.vue
+++ b/packages/mobile/src/views/Home.vue
@@ -1,53 +1,22 @@
 <template>
-  <div class="home">
-    <van-nav-bar title="愉快政" fixed left-arrow />
-
-    <van-cell-group>
-      <van-cell title="当前站点" :value="yhzinfo.mc" />
-    </van-cell-group>
+  <PageContainer title="愉快政">
+    <CurrentSite />
 
     <div class="content">
       <van-grid :gutter="10" :column-num="3" class="grid">
         <van-grid-item
-          icon="setting-o"
-          text="设备管理"
-          :to="{
-            name: 'EquipManage',
-            params: { data: encodeURIComponent(JSON.stringify(yhzinfo)) },
-          }"
-        />
-        <van-grid-item
-          icon="setting-o"
-          text="物资管理"
-          :to="{
-            name: 'MaterialManage',
-            params: { data: encodeURIComponent(JSON.stringify(yhzinfo)) },
-          }"
-        />
-        <van-grid-item
-          icon="setting-o"
-          text="人员管理"
-          :to="{
-            name: 'StaffManage',
-            params: { data: encodeURIComponent(JSON.stringify(yhzinfo)) },
-          }"
-        />
-        <van-grid-item
-          icon="setting-o"
-          text="冰雪灾害"
-          :to="{
-            name: 'IceEventManage',
-            params: { data: encodeURIComponent(JSON.stringify(yhzinfo)) },
-          }"
-        />
-        <van-grid-item
-          icon="setting-o"
-          text="气象预警"
-          :to="{
-            name: 'WarningMessage',
-            params: { data: encodeURIComponent(JSON.stringify(yhzinfo)) },
-          }"
-        />
+          class="grid-item"
+          v-for="item in gridItems"
+          :key="item.text"
+          :to="item.to"
+        >
+          <template #icon>
+            <img :src="item.icon" class="grid-icon" />
+          </template>
+          <template #text>
+            <span class="grid-text">{{ item.text }}</span>
+          </template>
+        </van-grid-item>
       </van-grid>
     </div>
     <van-popup
@@ -69,7 +38,7 @@
         >
       </div>
     </van-popup>
-  </div>
+  </PageContainer>
 </template>
 
 <script setup>
@@ -80,6 +49,14 @@ import { useRouter, useRoute } from "vue-router";
 import { useYHZStore } from "../stores/yhzStore";
 import { showToast } from "vant";
 import { request } from "../../../shared/utils/request";
+import PageContainer from "@/components/PageContainer.vue";
+import CurrentSite from "@/components/CurrentSite.vue";
+
+import group63Icon from "@/assets/images/组 63.png";
+import group105Icon from "@/assets/images/组 105.png";
+import group10501Icon from "@/assets/images/组 105(1).png";
+import group104Icon from "@/assets/images/组 104.png";
+import group106Icon from "@/assets/images/组 106.png";
 
 const router = useRouter();
 const yhzinfo = ref({});
@@ -89,6 +66,49 @@ const route = useRoute();
 const token = route.query.token;
 const YHZConfirmpopup = ref(false);
 
+// 配置项
+const gridItems = [
+  {
+    icon: group63Icon,
+    text: "设备管理",
+    to: {
+      name: "EquipManage",
+      params: { data: encodeURIComponent(JSON.stringify(yhzinfo.value)) },
+    },
+  },
+  {
+    icon: group10501Icon,
+    text: "物资管理",
+    to: {
+      name: "MaterialManage",
+      params: { data: encodeURIComponent(JSON.stringify(yhzinfo.value)) },
+    },
+  },
+  {
+    icon: group104Icon,
+    text: "人员管理",
+    to: {
+      name: "StaffManage",
+      params: { data: encodeURIComponent(JSON.stringify(yhzinfo.value)) },
+    },
+  },
+  {
+    icon: group106Icon,
+    text: "冰雪灾害",
+    to: {
+      name: "IceEventManage",
+      params: { data: encodeURIComponent(JSON.stringify(yhzinfo.value)) },
+    },
+  },
+  {
+    icon: group105Icon,
+    text: "预警信息",
+    to: {
+      name: "WarningMessage",
+    },
+  },
+];
+
 // 获取当前登录用于就职的养护站信息
 const getYHZinfo = async () => {
   try {
@@ -99,6 +119,13 @@ const getYHZinfo = async () => {
     if (res.code === "00000") {
       yhzinfo.value = res.data[0];
       yhzStore.setYHZInfo(res.data[0]);
+      
+      // 更新配置项中的params，确保使用最新的yhzinfo
+      gridItems.forEach(item => {
+        if (item.to.params && item.to.params.data) {
+          item.to.params.data = encodeURIComponent(JSON.stringify(yhzinfo.value));
+        }
+      });
     } else {
       throw new Error(res.message);
     }
@@ -114,6 +141,11 @@ const onYHZConfirmClose = () => {
   YHZConfirmpopup.value = false;
 };
 
+const getLocation = () => {
+  // 定位逻辑
+  YHZConfirmpopup.value = false;
+};
+
 onMounted(async () => {
   if (token) {
     localStorage.setItem("token", token);
@@ -135,19 +167,7 @@ const goToUser = () => {
 };
 </script>
 
-<style scoped>
-.home {
-  padding-top: var(--van-nav-bar-height);
-}
-
-.content {
-  padding: 16px;
-}
-
-.grid {
-  margin-top: 16px;
-}
-
+<style lang="scss" scoped>
 .btn-box {
   width: 100%;
   display: flex;
@@ -161,4 +181,24 @@ const goToUser = () => {
 .confirmpopup__content {
   padding: 20px;
 }
-</style>
+
+.grid-icon {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+}
+
+.grid-text {
+  font-size: 14px;
+  color: #323233;
+}
+:deep(.grid-item) {
+  .grid-text {
+    margin-top: 16px;
+    font-weight: 400;
+    font-size: 16px;
+    color: #333333;
+    line-height: 16px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/packages/mobile/src/views/WarningMessage/WarningMessageHandle.vue b/packages/mobile/src/views/WarningMessage/WarningMessageHandle.vue
index fd7e8ce..d30181c 100644
--- a/packages/mobile/src/views/WarningMessage/WarningMessageHandle.vue
+++ b/packages/mobile/src/views/WarningMessage/WarningMessageHandle.vue
@@ -3,9 +3,9 @@
     <CurrentSite />
 
     <div class="form-panel">
-      <van-field v-model="value" label="现场情况描述" placeholder="请输入备注" label-align="top" rows="3" type="textarea" />
+      <van-field v-model="form.a" label="现场情况描述" placeholder="请输入备注" label-align="top" rows="3" type="textarea" />
 
-      <van-field class="mt-8" v-model="value" label="备注(非必填)" placeholder="请填写" input-align="right" />
+      <van-field class="mt-8" v-model="form.b" label="备注(非必填)" placeholder="请填写" input-align="right" />
 
       <div class="image-upload-block">
         <div class="label-box">
@@ -45,39 +45,22 @@ const router = useRouter()
 // 上传附件相关
 const fileList = ref([])
 
+const form = ref({
+  a: '',
+  b: '',
+  photos: []
+})
+
 onMounted(() => {
   getData()
 })
 
-// 列表数据
-const list = ref([
-  {
-    area: '合川区',
-    level: '红色气象预警',
-    content: '今天，北京将进入大雪，请做好',
-    publishTime: '2026/01/10 20:29',
-    method: '立即启动防汛Ⅰ级应急响应，立即转移危险区'
-  },
-  {
-    area: '万州区',
-    level: '红色气象预警',
-    publishTime: '2025/10/10 20:29',
-    method: '立即启动防汛Ⅰ级应急响应，立即转移危险区'
-  },
-  {
-    area: '涪陵区',
-    level: '红色气象预警',
-    publishTime: '2025/10/10 20:29',
-    method: '立即启动防汛Ⅰ级应急响应，立即转移危险区'
-  }
-])
-
 // 文件删除
 const handleDelete = (file) => {
   if (file.serverUrl) {
-    const index = editForm.photos.findIndex((p) => p.photoUrl === file.serverUrl)
+    const index = form.value.photos.findIndex((p) => p.photoUrl === file.serverUrl)
     if (index !== -1) {
-      editForm.photos.splice(index, 1)
+      form.value.photos.splice(index, 1)
     }
   }
 }
@@ -99,13 +82,13 @@ const afterRead = async (file) => {
     })
     toast.close()
     if (res.code === '00000') {
-      editForm.photos.push({ photoUrl: res.data })
+      form.value.photos.push({ photoUrl: res.data })
       const index = fileList.value.findIndex((f) => f.file === file.file)
       if (index !== -1) {
         fileList.value[index].serverUrl = res.data
       }
 
-      console.log('editForm.photos', toRaw(editForm.photos))
+      console.log('form.value.photos', toRaw(form.value.photos))
       console.log('fileList.value', fileList.value)
     } else {
       throw new Error(res.message)
@@ -124,8 +107,10 @@ const getData = async () => {}
 const handleClickBack = () => {
   router.go(-1)
 }
-const confirm = () => {
-  router.push({ path: '/warningMessageHandle' })
+const confirm = async () => {
+  console.log(form.value)
+
+  router.go(-1)
 }
 </script>