消息中心基本完成

src/api/system/notice/index.ts

@@ -43,3 +43,28 @@ export function delNotice(noticeId: string | number | Array<string | number>) {
     method: 'delete'
   });
 }
+
+// 获取我的消息列表
+export function listMyNotice(query: NoticeQuery): AxiosPromise<NoticeVO[]> {
+  return request({
+    url: '/system/notice/myList',
+    method: 'get',
+    params: query
+  });
+}
+
+// 标记消息为已读
+export function readNotice(noticeId: string | number) {
+  return request({
+    url: '/system/notice/read/' + noticeId,
+    method: 'put'
+  });
+}
+
+// 标记所有消息为已读
+export function readAllNotice() {
+  return request({
+    url: '/system/notice/readAll',
+    method: 'put'
+  });
+}

src/api/system/notice/types.ts

@@ -6,13 +6,30 @@ export interface NoticeVO extends BaseEntity {
   status: string;
   remark: string;
   createByName: string;
+
+  // New fields from backend modification
+  id?: number | string;
+  title?: string;
+  type?: number | string;
+  content?: string;
+  senderType?: number;
+  sender?: number | string;
+  receiverType?: number;
+  receiver?: number | string;
+  readFlag?: boolean | string | number;
+  readTime?: string;
+  otherId?: number | string;
 }
 
 export interface NoticeQuery extends PageQuery {
-  noticeTitle: string;
-  createByName: string;
-  status: string;
-  noticeType: string;
+  noticeTitle?: string;
+  createByName?: string;
+  status?: string;
+  noticeType?: string;
+  // New fields from backend modification
+  title?: string;
+  type?: number | string;
+  readFlag?: boolean | string | number;
 }
 
 export interface NoticeForm {

src/assets/icons/svg/message-center.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+  <path d="M64 8c-20.2 0-36.5 16.3-36.5 36.5v28L16 84v8h96v-8l-11.5-11.5v-28C100.5 24.3 84.2 8 64 8zm0 112c7.7 0 14-6.3 14-14v-6H50v6c0 7.7 6.3 14 14 14z"/>
+</svg>

src/layout/components/Navbar.vue

@@ -6,20 +6,20 @@
 
     <div class="right-menu flex align-center">
       <template v-if="appStore.device !== 'mobile'">
-        <el-select
-          v-if="userId === 1 && tenantEnabled"
-          v-model="companyName"
-          class="min-w-244px"
-          clearable
-          filterable
-          reserve-keyword
-          :placeholder="proxy.$t('navbar.selectTenant')"
-          @change="dynamicTenantEvent"
-          @clear="dynamicClearEvent"
-        >
-          <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option>
-          <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
-        </el-select>
+<!--        <el-select-->
+<!--          v-if="userId === 1 && tenantEnabled"-->
+<!--          v-model="companyName"-->
+<!--          class="min-w-244px"-->
+<!--          clearable-->
+<!--          filterable-->
+<!--          reserve-keyword-->
+<!--          :placeholder="proxy.$t('navbar.selectTenant')"-->
+<!--          @change="dynamicTenantEvent"-->
+<!--          @clear="dynamicClearEvent"-->
+<!--        >-->
+<!--          <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option>-->
+<!--          <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>-->
+<!--        </el-select>-->
 
         <search-menu ref="searchMenuRef" />
 <!--        <el-tooltip content="搜索" effect="dark" placement="bottom">-->
@@ -27,17 +27,19 @@
 <!--            <svg-icon class-name="search-icon" icon-class="search" />-->
 <!--          </div>-->
 <!--        </el-tooltip>-->
-<!--        &lt;!&ndash; 消息 &ndash;&gt;-->
+        <!-- 消息 -->
 <!--        <el-tooltip :content="proxy.$t('navbar.message')" effect="dark" placement="bottom">-->
-<!--          <div>-->
-<!--            <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">-->
+<!--          <div class="message-wrapper">-->
+<!--            <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="350" :persistent="false" @before-enter="getNoticeList">-->
 <!--              <template #reference>-->
-<!--                <el-badge :value="newNotice > 0 ? newNotice : ''" :max="99">-->
-<!--                  <div class="right-menu-item hover-effect" style="display: block"><svg-icon icon-class="message" /></div>-->
+<!--                <el-badge :value="newNotice > 0 ? newNotice : ''" :max="99" class="message-badge">-->
+<!--                  <div class="right-menu-item hover-effect notice-btn">-->
+<!--                    <svg-icon icon-class="message-center" style="width: 26px; height: 26px;" />-->
+<!--                  </div>-->
 <!--                </el-badge>-->
 <!--              </template>-->
 <!--              <template #default>-->
-<!--                <notice></notice>-->
+<!--                <notice ref="noticeRef" @read="updateNoticeCount"></notice>-->
 <!--              </template>-->
 <!--            </el-popover>-->
 <!--          </div>-->
@@ -99,6 +101,7 @@ import { TenantVO } from '@/api/types';
 import notice from './notice/index.vue';
 import router from '@/router';
 import { ElMessageBoxOptions } from 'element-plus/es/components/message-box/src/message-box.type';
+import { listMyNotice } from '@/api/system/notice';
 
 const appStore = useAppStore();
 const userStore = useUserStore();
@@ -117,11 +120,50 @@ const dynamic = ref(false);
 const tenantEnabled = ref(true);
 // 搜索菜单
 const searchMenuRef = ref<InstanceType<typeof SearchMenu>>();
+const noticeRef = ref();
 
 const openSearchMenu = () => {
   searchMenuRef.value?.openSearch();
 };
 
+const getNoticeList = () => {
+  fetchUnreadCount();
+  noticeRef.value?.getList();
+};
+
+const updateNoticeCount = () => {
+  fetchUnreadCount();
+};
+
+const fetchUnreadCount = async () => {
+  try {
+    const res = await listMyNotice({
+      pageNum: 1,
+      pageSize: 1,
+      readFlag: false,
+      _t: new Date().getTime()
+    } as any);
+    newNotice.value = Number(res.total) || 0;
+  } catch (error) {
+    console.error('获取未读消息数量失败', error);
+  }
+};
+
+let pollingTimer: any = null;
+
+onMounted(() => {
+  // fetchUnreadCount();
+  // // 每5秒轮询一次后台获取未读消息
+  // pollingTimer = setInterval(fetchUnreadCount, 5000);
+});
+
+onUnmounted(() => {
+  if (pollingTimer) {
+    clearInterval(pollingTimer);
+    pollingTimer = null;
+  }
+});
+
 // 动态切换
 const dynamicTenantEvent = async (tenantId: string) => {
   if (companyName.value != null && companyName.value !== '') {
@@ -190,14 +232,14 @@ const handleCommand = (command: string) => {
     commandMap[command]();
   }
 };
-//用深度监听 消息
-watch(
-  () => noticeStore.state.value.notices,
-  (newVal) => {
-    newNotice.value = newVal.filter((item: any) => !item.read).length;
-  },
-  { deep: true }
-);
+// 用深度监听 消息 (目前使用定时器轮询替代)
+// watch(
+//   () => noticeStore.state.value.notices,
+//   (newVal) => {
+//     newNotice.value = newVal.filter((item: any) => !item.read).length;
+//   },
+//   { deep: true }
+// );
 </script>
 
 <style lang="scss" scoped>
@@ -206,7 +248,9 @@ watch(
 }
 
 :deep(.el-badge__content.is-fixed) {
-  top: 12px;
+  top: 15px;
+  right: 12px;
+  transform: translateY(-50%) translateX(50%) scale(0.9);
 }
 
 .flex {
@@ -217,6 +261,20 @@ watch(
   align-items: center;
 }
 
+.message-wrapper {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.notice-btn {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 8px !important;
+}
+
 .navbar {
   height: 50px;
   overflow: hidden;

src/layout/components/notice/index.vue

@@ -1,130 +1,288 @@
 <template>
-  <div v-loading="state.loading" class="layout-navbars-breadcrumb-user-news">
+  <div v-loading="loading" class="layout-notice">
     <div class="head-box">
-      <div class="head-box-title">通知公告</div>
-      <div class="head-box-btn" @click="readAll">全部已读</div>
+      <div class="head-box-title">消息通知</div>
+      <div class="head-box-btn" @click="handleReadAll">全部已读</div>
     </div>
-    <div v-loading="state.loading" class="content-box">
-      <template v-if="newsList.length > 0">
-        <div v-for="(v, k) in newsList" :key="k" class="content-box-item" @click="onNewsClick(k)">
-          <div class="item-conten">
-            <div>{{ v.message }}</div>
-            <div class="content-box-msg"></div>
-            <div class="content-box-time">{{ v.time }}</div>
+    <div class="content-box">
+      <template v-if="noticeList.length > 0">
+        <div v-for="item in noticeList" :key="item.id" class="content-box-item" @click="handleDetail(item)">
+          <div class="item-icon" :style="{ backgroundColor: getIconConfig(item).bgColor }">
+            <svg-icon :icon-class="getIconConfig(item).icon" />
           </div>
-          <!-- 已读/未读 -->
-          <span v-if="v.read" class="el-tag el-tag--success el-tag--mini read">已读</span>
-          <span v-else class="el-tag el-tag--danger el-tag--mini read">未读</span>
+          <div class="item-content">
+            <div class="item-title text-ellipsis">{{ item.title }}</div>
+            <div class="item-time">{{ parseTime(item.createTime, '{m}-{d} {h}:{i}') }}</div>
+          </div>
+          <div v-if="!item.readFlag" class="unread-dot"></div>
         </div>
       </template>
-      <el-empty v-else :description="'消息为空'"></el-empty>
+      <el-empty v-else :image-size="60" description="暂无未读消息"></el-empty>
     </div>
-    <div v-if="newsList.length > 0" class="foot-box" @click="onGoToGiteeClick">前往gitee</div>
+    <div class="foot-box" @click="handleViewAll">查看全部消息</div>
+
+    <!-- 消息详情对话框 -->
+    <el-dialog title="消息详情" v-model="detailDialog.open" width="500px" append-to-body destroy-on-close>
+      <div class="dialog-content-wrapper">
+        <div class="dialog-header">
+          <el-tag :type="detailDialog.tagType" effect="plain" size="small">{{ detailDialog.tagLabel }}</el-tag>
+          <span class="dialog-time">{{ detailDialog.createTime }}</span>
+        </div>
+        <div class="dialog-main-title">{{ detailDialog.title }}</div>
+        <div class="dialog-desc-block">
+          {{ detailDialog.content }}
+        </div>
+        <div class="dialog-action-link" @click="handleProcess">
+          <el-link type="primary" :underline="false">前往处理 >></el-link>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="detailDialog.open = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
-<script setup lang="ts" name="layoutBreadcrumbUserNews">
-import { useNoticeStore } from '@/store/modules/notice';
+<script setup lang="ts">
+import { listMyNotice, readNotice, readAllNotice } from '@/api/system/notice';
+import { NoticeVO } from '@/api/system/notice/types';
+import router from '@/router';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const emit = defineEmits(['read']);
 
-const noticeStore = useNoticeStore();
-const { readAll } = useNoticeStore();
+const noticeList = ref<NoticeVO[]>([]);
+const loading = ref(false);
 
-// 定义变量内容
-const state = reactive({
-  loading: false
+const detailDialog = reactive({
+  open: false,
+  title: '',
+  content: '',
+  createTime: '',
+  tagLabel: '',
+  tagType: '' as any
 });
-const newsList = ref([]) as any;
-
-/**
- * 初始化数据
- * @returns
- */
-const getTableData = async () => {
-  state.loading = true;
-  newsList.value = noticeStore.state.notices;
-  state.loading = false;
+
+/** 获取图标和颜色配置 */
+const getIconConfig = (item: any) => {
+  const title = item.title || '';
+  if (title.includes('异常')) return { icon: 'bug', bgColor: '#f56c6c' };
+  if (title.includes('拒单')) return { icon: 'message-center', bgColor: '#f56c6c' };
+  if (title.includes('入驻') || title.includes('申请')) return { icon: 'user', bgColor: '#e6a23c' };
+  if (title.includes('派单') || title.includes('新订单')) return { icon: 'guide', bgColor: '#409eff' };
+  if (title.includes('完成')) return { icon: 'finish', bgColor: '#67c23a' };
+  return { icon: 'message-center', bgColor: '#909399' };
+};
+
+/** 查询未读消息 */
+const getList = async () => {
+  loading.value = true;
+  try {
+    const res = await listMyNotice({
+      pageNum: 1,
+      pageSize: 5,
+      readFlag: false
+    } as any);
+    noticeList.value = res.rows;
+  } finally {
+    loading.value = false;
+  }
 };
 
-//点击消息，写入已读
-const onNewsClick = (item: any) => {
-  newsList.value[item].read = true;
-  //并且写入pinia
-  noticeStore.state.notices = newsList.value;
+/** 消息详情 */
+const handleDetail = (item: NoticeVO) => {
+  const title = item.title || '';
+  detailDialog.title = title;
+  detailDialog.content = item.content || '';
+  detailDialog.createTime = proxy?.parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}') || '';
+
+  if (title.includes('异常')) {
+    detailDialog.tagLabel = '异常上报';
+    detailDialog.tagType = 'danger';
+  } else if (title.includes('拒单')) {
+    detailDialog.tagLabel = '拒单通知';
+    detailDialog.tagType = 'danger';
+  } else if (title.includes('入驻') || title.includes('申请')) {
+    detailDialog.tagLabel = '自主注册审核';
+    detailDialog.tagType = 'warning';
+  } else if (title.includes('派单') || title.includes('新订单')) {
+    detailDialog.tagLabel = '新订单';
+    detailDialog.tagType = 'primary';
+  } else if (title.includes('完成')) {
+    detailDialog.tagLabel = '服务完成';
+    detailDialog.tagType = 'success';
+  } else {
+    detailDialog.tagLabel = '系统消息';
+    detailDialog.tagType = 'info';
+  }
+
+  detailDialog.open = true;
+
+  if (!item.readFlag) {
+    readNotice(item.id as number).then(() => {
+      item.readFlag = true;
+      emit('read');
+      setTimeout(getList, 300);
+    });
+  }
 };
 
-// 前往通知中心点击
-const onGoToGiteeClick = () => {
-  window.open('https://gitee.com/dromara/RuoYi-Vue-Plus/tree/5.X/');
+/** 前往处理 */
+const handleProcess = () => {
+  detailDialog.open = false;
+  if (detailDialog.title.includes('拒单') || detailDialog.title.includes('派单') || detailDialog.title.includes('异常')) {
+    router.push({ path: '/order/orderList' });
+  }
 };
 
-onMounted(() => {
-  nextTick(() => {
-    getTableData();
+/** 全部已读 */
+const handleReadAll = () => {
+  proxy?.$modal.confirm('是否将全部未读消息标记为已读？').then(() => {
+    return readAllNotice();
+  }).then(() => {
+    proxy?.$modal.msgSuccess('全部已读操作成功');
+    emit('read');
+    getList();
   });
+};
+
+/** 查看全部 */
+const handleViewAll = () => {
+  router.push('/notice');
+};
+
+defineExpose({
+  getList
+});
+
+onMounted(() => {
+  getList();
 });
 </script>
 
 <style lang="scss" scoped>
-.layout-navbars-breadcrumb-user-news {
+.layout-notice {
   .head-box {
     display: flex;
     border-bottom: 1px solid var(--el-border-color-lighter);
     box-sizing: border-box;
     color: var(--el-text-color-primary);
     justify-content: space-between;
-    height: 35px;
+    height: 40px;
     align-items: center;
+    padding: 0 16px;
+    .head-box-title {
+      font-size: 14px;
+      font-weight: bold;
+    }
     .head-box-btn {
       color: var(--el-color-primary);
-      font-size: 13px;
+      font-size: 12px;
       cursor: pointer;
-      opacity: 0.8;
       &:hover {
-        opacity: 1;
+        text-decoration: underline;
       }
     }
   }
   .content-box {
-    height: 300px;
-    overflow: auto;
-    font-size: 13px;
+    max-height: 400px;
+    overflow-y: auto;
+    padding: 8px 0;
     .content-box-item {
-      padding-top: 12px;
       display: flex;
-      &:last-of-type {
-        padding-bottom: 12px;
+      align-items: center;
+      padding: 12px 16px;
+      cursor: pointer;
+      position: relative;
+      transition: background-color 0.2s;
+      &:hover {
+        background-color: var(--el-fill-color-light);
       }
-      .content-box-msg {
-        color: var(--el-text-color-secondary);
-        margin-top: 5px;
-        margin-bottom: 5px;
+      .item-icon {
+        width: 36px;
+        height: 36px;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 12px;
+        flex-shrink: 0;
+        .svg-icon {
+          color: #fff;
+          font-size: 18px;
+        }
       }
-      .content-box-time {
-        color: var(--el-text-color-secondary);
+      .item-content {
+        flex: 1;
+        overflow: hidden;
+        .item-title {
+          font-size: 14px;
+          color: var(--el-text-color-primary);
+          margin-bottom: 4px;
+        }
+        .item-time {
+          font-size: 12px;
+          color: var(--el-text-color-secondary);
+        }
       }
-      .item-conten {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
+      .unread-dot {
+        width: 8px;
+        height: 8px;
+        background-color: var(--el-color-danger);
+        border-radius: 50%;
+        margin-left: 8px;
       }
     }
   }
   .foot-box {
-    height: 35px;
+    height: 40px;
     color: var(--el-color-primary);
     font-size: 13px;
     cursor: pointer;
-    opacity: 0.8;
     display: flex;
     align-items: center;
     justify-content: center;
     border-top: 1px solid var(--el-border-color-lighter);
     &:hover {
-      opacity: 1;
+      background-color: var(--el-fill-color-light);
     }
   }
-  :deep(.el-empty__description p) {
-    font-size: 13px;
+}
+
+.text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dialog-content-wrapper {
+  .dialog-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    .dialog-time {
+      font-size: 12px;
+      color: #909399;
+    }
+  }
+  .dialog-main-title {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 12px;
+  }
+  .dialog-desc-block {
+    background-color: #f8f8f8;
+    padding: 12px;
+    border-radius: 4px;
+    font-size: 14px;
+    line-height: 1.6;
+    margin-bottom: 16px;
+  }
+  .dialog-action-link {
+    text-align: right;
   }
 }
 </style>

src/views/notice/notice/index.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="message-container">
+    <div class="message-header">
+      <div class="title">消息通知</div>
+      <el-button @click="handleReadAll">全部已读</el-button>
+    </div>
+
+    <!-- 顶部页签 -->
+    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+      <el-tab-pane label="全部消息" name="all"></el-tab-pane>
+      <el-tab-pane label="未读消息" name="unread"></el-tab-pane>
+      <el-tab-pane label="拒单通知" name="reject"></el-tab-pane>
+      <el-tab-pane label="异常上报" name="anomaly"></el-tab-pane>
+    </el-tabs>
+
+    <!-- 消息列表 -->
+    <div class="message-list" v-loading="loading">
+      <template v-if="noticeList && noticeList.length > 0">
+        <div 
+          class="message-item" 
+          v-for="item in noticeList" 
+          :key="item.id" 
+          :class="{'is-unread': !(item.readFlag || item.readFlag === '1' || item.readFlag === 1)}" 
+          @click="handleDetail(item)"
+        >
+          <el-badge 
+            :is-dot="!(item.readFlag || item.readFlag === '1' || item.readFlag === 1)" 
+            class="icon-badge top-left-dot"
+          >
+            <div class="item-icon" :style="{ backgroundColor: getIconConfig(item).bgColor }">
+              <svg-icon :icon-class="getIconConfig(item).icon" />
+            </div>
+          </el-badge>
+          
+          <div class="item-content">
+            <div class="item-title">{{ item.title }}</div>
+            <div class="item-desc">{{ item.content }}</div>
+          </div>
+          
+          <div class="item-time">
+            {{ parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}') }}
+          </div>
+        </div>
+      </template>
+      <el-empty v-else description="暂无消息数据" />
+    </div>
+
+    <!-- 分页 -->
+    <div class="pagination-container" v-show="total > 0">
+      <el-pagination
+        v-model:current-page="queryParams.pageNum"
+        v-model:page-size="queryParams.pageSize"
+        layout="total, prev, pager, next, jumper"
+        :total="total"
+        @current-change="getList"
+      />
+    </div>
+
+    <!-- 消息详情对话框 -->
+    <el-dialog title="消息详情" v-model="detailDialog.open" width="600px" append-to-body destroy-on-close>
+      <div class="dialog-content-wrapper">
+        <div class="dialog-header">
+          <el-tag :type="detailDialog.tagType" effect="plain" size="small">{{ detailDialog.tagLabel }}</el-tag>
+          <span class="dialog-time">{{ detailDialog.createTime }}</span>
+        </div>
+        <div class="dialog-main-title">{{ detailDialog.title }}</div>
+        <div class="dialog-desc-block">
+          {{ detailDialog.content }}
+        </div>
+        <div class="dialog-action-link" @click="handleProcess">
+          <el-link type="primary" :underline="false">前往处理 >></el-link>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="detailDialog.open = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, toRefs, getCurrentInstance, ComponentInternalInstance } from 'vue';
+import { useRouter } from 'vue-router';
+import { listMyNotice, readNotice, readAllNotice } from '@/api/system/notice';
+import { NoticeQuery, NoticeVO } from '@/api/system/notice/types';
+
+const router = useRouter();
+// eslint-disable-next-line camelcase
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const activeTab = ref('all');
+const noticeList = ref<NoticeVO[]>([]);
+const loading = ref(true);
+const total = ref(0);
+
+const detailDialog = reactive({
+  open: false,
+  title: '',
+  content: '',
+  createTime: '',
+  tagLabel: '',
+  tagType: '' as any
+});
+
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    title: undefined,
+    type: undefined,
+    readFlag: undefined
+  } as NoticeQuery
+});
+
+const { queryParams } = toRefs(data);
+
+/** 获取图标和颜色配置 */
+const getIconConfig = (item: any) => {
+  const title = item.title || '';
+  if (title.includes('异常')) return { icon: 'bug', bgColor: '#f56c6c' };
+  if (title.includes('拒单')) return { icon: 'message-center', bgColor: '#f56c6c' };
+  if (title.includes('入驻') || title.includes('申请')) return { icon: 'user', bgColor: '#e6a23c' };
+  if (title.includes('派单') || title.includes('新订单')) return { icon: 'guide', bgColor: '#409eff' };
+  if (title.includes('完成')) return { icon: 'finish', bgColor: '#67c23a' };
+  return { icon: 'message-center', bgColor: '#909399' }; 
+};
+
+/** 查询我的消息列表 */
+function getList() {
+  loading.value = true;
+  listMyNotice(queryParams.value).then((response: any) => {
+    noticeList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+/** 切换页签 */
+function handleTabClick(tab: any) {
+  queryParams.value.pageNum = 1;
+  queryParams.value.type = undefined;
+  queryParams.value.title = undefined;
+  queryParams.value.readFlag = undefined;
+  
+  const paneName = tab.paneName as string;
+  if (paneName === 'unread') {
+    queryParams.value.readFlag = false as any;
+  } else if (paneName === 'reject') {
+    queryParams.value.title = '拒单' as any;
+  } else if (paneName === 'anomaly') {
+    queryParams.value.title = '异常' as any;
+  }
+  
+  getList();
+}
+
+/** 消息详情点击与设为已读 */
+function handleDetail(item: NoticeVO) {
+  const title = item.title || '';
+  detailDialog.title = title;
+  detailDialog.content = item.content || '';
+  detailDialog.createTime = proxy?.parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}') || '';
+  
+  if (title.includes('异常')) {
+    detailDialog.tagLabel = '异常上报';
+    detailDialog.tagType = 'danger';
+  } else if (title.includes('拒单')) {
+    detailDialog.tagLabel = '拒单通知';
+    detailDialog.tagType = 'danger';
+  } else if (title.includes('入驻') || title.includes('申请')) {
+    detailDialog.tagLabel = '自主注册审核';
+    detailDialog.tagType = 'warning';
+  } else if (title.includes('派单') || title.includes('新订单')) {
+    detailDialog.tagLabel = '新订单';
+    detailDialog.tagType = 'primary';
+  } else if (title.includes('完成')) {
+    detailDialog.tagLabel = '服务完成';
+    detailDialog.tagType = 'success';
+  } else {
+    detailDialog.tagLabel = '系统消息';
+    detailDialog.tagType = 'info';
+  }
+
+  detailDialog.open = true;
+
+  // 如果状态未读，发请求
+  if (!(item.readFlag || item.readFlag === '1' || item.readFlag === 1)) {
+    readNotice(item.id as number).then(() => {
+      item.readFlag = true as any; // 本地变更为已读
+    });
+  }
+}
+
+/** 前往处理 */
+function handleProcess() {
+  detailDialog.open = false;
+  if (detailDialog.title.includes('拒单') || detailDialog.title.includes('派单') || detailDialog.title.includes('异常')) {
+    router.push({ path: '/order/orderList' });
+  }
+}
+
+/** 全部标为已读操作 */
+function handleReadAll() {
+  proxy?.$modal.confirm('是否确认将全部未读消息标记为已读？').then(function () {
+    return readAllNotice();
+  }).then(() => {
+    proxy?.$modal.msgSuccess('全部已读操作成功');
+    getList();
+  }).catch(() => {});
+}
+
+getList();
+</script>
+
+<style lang="scss" scoped>
+.message-container {
+  padding: 24px;
+  background-color: #fff;
+  margin: 20px;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+
+  .message-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+
+    .title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #303133;
+    }
+  }
+
+  :deep(.el-tabs__nav-wrap::after) {
+    background-color: #f0f0f0;
+    height: 1px;
+  }
+
+  .message-list {
+    min-height: 400px;
+  }
+
+  .message-item {
+    display: flex;
+    padding: 20px 24px;
+    border-bottom: 1px solid #f0f0f0;
+    cursor: pointer;
+    background-color: #fff;
+    align-items: flex-start;
+    transition: background-color 0.3s ease;
+
+    &.is-unread {
+      background-color: #f3faee;
+    }
+
+    &:hover {
+      background-color: #f5f7fa;
+      &.is-unread {
+        background-color: #ecf3e5;
+      }
+    }
+    
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .icon-badge.top-left-dot {
+    margin-right: 20px;
+    flex-shrink: 0;
+    
+    :deep(.el-badge__content.is-fixed.is-dot) {
+      right: auto;
+      left: 0;
+      transform: translateY(-30%) translateX(-30%);
+    }
+  }
+
+  .item-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .svg-icon {
+      font-size: 24px;
+      color: #fff;
+    }
+  }
+
+  .item-content {
+    flex: 1;
+    overflow: hidden;
+
+    .item-title {
+      font-size: 16px;
+      font-weight: bold;
+      color: #303133;
+      margin-bottom: 8px;
+      line-height: 1.4;
+    }
+
+    .item-desc {
+      font-size: 14px;
+      color: #606266;
+      line-height: 1.5;
+    }
+  }
+
+  .item-time {
+    width: 150px;
+    text-align: right;
+    font-size: 13px;
+    font-family: monospace;
+    color: #909399;
+    flex-shrink: 0;
+  }
+
+  .pagination-container {
+    margin-top: 24px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+.dialog-content-wrapper {
+  padding: 0 10px;
+  
+  .dialog-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    
+    .dialog-time {
+      font-size: 13px;
+      color: #909399;
+    }
+  }
+  
+  .dialog-main-title {
+    font-size: 18px;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 16px;
+  }
+  
+  .dialog-desc-block {
+    background-color: #f8f8f8;
+    padding: 16px;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #606266;
+    line-height: 1.6;
+    margin-bottom: 16px;
+  }
+  
+  .dialog-action-link {
+    text-align: right;
+    
+    .el-link {
+      font-size: 14px;
+    }
+  }
+}
+</style>

src/views/order/purchase/components/TransportForm.vue

@@ -83,6 +83,10 @@
         </div>
       </div>
     </div>
+
+    <div class="remark-section">
+      <el-input v-model="transportData.other" type="textarea" :rows="4" placeholder="请添加接送备注 (如宠物性格、接送要求等)" />
+    </div>
   </div>
 </template>
 
@@ -119,4 +123,5 @@ const emit = defineEmits(['change'])
   font-size: 14px;
   padding-right: 5px;
 }
+.remark-section { background: #fdfdfd; border: 1px dashed #dcdfe6; padding: 15px; border-radius: 6px; margin-top: 20px; }
 </style>

src/views/order/purchase/index.vue

@@ -275,7 +275,8 @@ const form = reactive({
     dropEndDetail: '',
     dropContact: '',
     dropPhone: '',
-    dropTime: ''
+    dropTime: '',
+    other: ''
   },
   feeding: {
     pkgId: '',
@@ -591,7 +592,8 @@ const resetForm = () => {
     dropEndDetail: '',
     dropContact: '',
     dropPhone: '',
-    dropTime: ''
+    dropTime: '',
+    other: ''
   };
   form.feeding = {
     pkgId: '',
@@ -759,18 +761,20 @@ onMounted(() => {
 
 .create-layout {
   display: flex;
-  gap: 20px;
-  max-width: 1400px;
-  margin: 0 auto;
+  align-items: flex-start;
+  width: 100%;
+  margin: 0;
 }
 
 /* Left Content */
 .form-container {
-  flex: 1;
+  width: 70%;
+  padding-right: 20px;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 20px;
+  box-sizing: border-box;
 }
 
 .section-card {
@@ -1049,7 +1053,7 @@ onMounted(() => {
 
 /* Sidebar */
 .summary-sidebar {
-  width: 320px;
+  width: 30%;
   flex-shrink: 0;
 }
 
@@ -1058,9 +1062,9 @@ onMounted(() => {
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   position: fixed;
-  top: 150px;
-  right: 80px;
-  width: 320px;
+  top: 154px;
+  right: 10px;
+  width: 25%;
   z-index: 2000;
 }