feat: add message page

2026-05-07 17:13:00 +08:00
parent 93f60c74ab
commit c63f29e500
8 changed files with 508 additions and 109 deletions
--- a/src/pages/message/index.tsx
+++ b/src/pages/message/index.tsx
@@ -0,0 +1,145 @@
+import { Text, View } from "@tarojs/components";
+import { useState } from "react";
+import TabBar from "../../components/tab-bar";
+import "./index.scss";
+
+type MessageTabKey = "vital" | "system";
+
+type MessageItem = {
+  id: string;
+  title: string;
+  deviceId: string;
+  userName: string;
+  messageType: string;
+  valueText: string;
+  occurredAt: string;
+  category: MessageTabKey;
+};
+
+const tabs: Array<{ key: MessageTabKey; label: string; hasDot?: boolean }> = [
+  { key: "vital", label: "体征消息" },
+  { key: "system", label: "系统消息", hasDot: true }
+];
+
+const messageList: MessageItem[] = [
+  {
+    id: "vital-1",
+    title: "实时监测结果通知",
+    deviceId: "A54984651",
+    userName: "1201/李小北",
+    messageType: "心率异常",
+    valueText: "106",
+    occurredAt: "2024-07-30 01:15",
+    category: "vital"
+  },
+  {
+    id: "vital-2",
+    title: "睡眠报告分析通知",
+    deviceId: "A54984651",
+    userName: "1201/李小北",
+    messageType: "HRV异常",
+    valueText: "89",
+    occurredAt: "2024-07-30 01:15",
+    category: "vital"
+  },
+  {
+    id: "vital-3",
+    title: "睡眠月报分析通知",
+    deviceId: "A54984651",
+    userName: "1201/李小北",
+    messageType: "睡眠得分",
+    valueText: "有20天低于60分",
+    occurredAt: "2024-07-30 01:15",
+    category: "vital"
+  },
+  {
+    id: "system-1",
+    title: "系统升级提醒",
+    deviceId: "平台消息",
+    userName: "全部用户",
+    messageType: "版本更新",
+    valueText: "建议升级到最新版本",
+    occurredAt: "2024-07-30 09:30",
+    category: "system"
+  },
+  {
+    id: "system-2",
+    title: "服务时间调整通知",
+    deviceId: "平台消息",
+    userName: "全部用户",
+    messageType: "运营公告",
+    valueText: "周日 02:00-04:00 系统维护",
+    occurredAt: "2024-07-29 18:00",
+    category: "system"
+  }
+];
+
+const fieldLabels = {
+  deviceId: "设备ID",
+  userName: "使用人员",
+  messageType: "消息类型",
+  valueText: "检测数值",
+  occurredAt: "发生时间"
+};
+
+export default function MessagePage() {
+  const [activeTab, setActiveTab] = useState<MessageTabKey>("vital");
+
+  const currentMessages = messageList.filter((item) => item.category === activeTab);
+
+  return (
+    <View className="message-page">
+      <View className="message-page__glow message-page__glow--top" />
+      <View className="message-page__glow message-page__glow--side" />
+
+      <View className="message-tabs">
+        {tabs.map((item) => {
+          const isActive = item.key === activeTab;
+
+          return (
+            <View className="message-tabs__item" key={item.key} onClick={() => setActiveTab(item.key)}>
+              <Text className={`message-tabs__label ${isActive ? "message-tabs__label--active" : ""}`}>{item.label}</Text>
+              {item.hasDot ? <View className="message-tabs__dot" /> : null}
+              {isActive ? <View className="message-tabs__line" /> : null}
+            </View>
+          );
+        })}
+      </View>
+
+      <View className="message-list">
+        {currentMessages.map((item) => (
+          <View className="message-card" key={item.id}>
+            <Text className="message-card__title">{item.title}</Text>
+
+            <View className="message-card__row">
+              <Text className="message-card__label">{fieldLabels.deviceId}</Text>
+              <Text className="message-card__value">{item.deviceId}</Text>
+            </View>
+
+            <View className="message-card__row">
+              <Text className="message-card__label">{fieldLabels.userName}</Text>
+              <Text className="message-card__value">{item.userName}</Text>
+            </View>
+
+            <View className="message-card__row">
+              <Text className="message-card__label">{fieldLabels.messageType}</Text>
+              <Text className="message-card__value">{item.messageType}</Text>
+            </View>
+
+            <View className="message-card__row">
+              <Text className="message-card__label">{fieldLabels.valueText}</Text>
+              <Text className="message-card__value">{item.valueText}</Text>
+            </View>
+
+            <View className="message-card__row">
+              <Text className="message-card__label">{fieldLabels.occurredAt}</Text>
+              <Text className="message-card__value">{item.occurredAt}</Text>
+            </View>
+          </View>
+        ))}
+      </View>
+
+      <TabBar activeKey="message" />
+    </View>
+  );
+}