1. 我的作业完成

2. 我的消息完成
3. 优化细节显示效果

entry/src/main/ets/pages/PageHome.ets

@@ -21,16 +21,19 @@ struct PageHome {
         TabJobs()
       }
       .tabBar(this.TabBuilder(1, "作业", $r('app.media.jobs')))
+      .clip(false)
 
       TabContent() {
         TabMessage()
       }
       .tabBar(this.TabBuilder(2, "消息", $r('app.media.message')))
+      .clip(false)
 
       TabContent() {
         TabSettings()
       }
       .tabBar(this.TabBuilder(3, "设置", $r("app.media.settings")))
+      .clip(false)
     }
     .width('100%')
     .height('100%')

entry/src/main/ets/pages/PageHomeComponents/TabHome.ets

@@ -1,5 +1,5 @@
 import { VMHome } from '../../vm/VMHome'
-import { VMHomeTab } from '../../vm/VMHomeTab'
+import { VMTabHome } from '../../vm/VMTabHome'
 
 /**
  * 首页Tab页面
@@ -9,7 +9,7 @@ export struct TabHome {
   // 父组件传递
   @Link vmHome: VMHome
   // 页面状态
-  @State vm: VMHomeTab = new VMHomeTab()
+  @State vm: VMTabHome = new VMTabHome()
 
   aboutToAppear(): void {
     this.vm.init()
@@ -40,13 +40,15 @@ export struct TabHome {
   TopBar() {
     Column() {
       Row() {
-        Image($r("app.media.user"))
-          .width(36)
-          .height(36)
-          .borderRadius("50%")
-          .backgroundColor("#FFD700")
-          .padding(8)
-          .fillColor(Color.White)
+        Stack() {
+          Image($r("app.media.user")).fillColor(Color.White)
+        }
+        .width(36)
+        .height(36)
+        .borderRadius("50%")
+        .backgroundColor("#FFD700")
+        .padding(8)
+
         Column() {
           Text(this.vm.username).fontSize(16).fontColor(Color.White).fontWeight(FontWeight.Medium)
           Text("操作员 电气维护组").fontSize(12).fontColor(Color.White).opacity(0.8)
@@ -255,6 +257,6 @@ export struct TabHome {
         .margin({ bottom: 15 })
       })
     }
-    .width("100%").layoutWeight(1).padding({ left: 20, right: 20 }).scrollBar(BarState.Off)
+    .width("100%").layoutWeight(1).padding({ left: 16, right: 16 }).scrollBar(BarState.Off)
   }
 }

entry/src/main/ets/pages/PageHomeComponents/TabJobs.ets

@@ -1,6 +1,132 @@
+import { VMTabJobs } from '../../vm/VMTabJobs'
+
 @Component
 export struct TabJobs {
+  @State vm: VMTabJobs = new VMTabJobs()
+
   build() {
-    Text("我是作业")
+    Column() {
+      this.TopBar()
+      Refresh({ refreshing: $$this.vm.isRefreshing }) {
+        List() {
+          ForEach(["今天", 2, 3, "昨天", 5, 6, 7, 8], (item: object, idx: number) => {
+            if (idx == 0 || idx == 3) {
+              ListItem() {
+                this.ListItemTitle(item.toString())
+              }
+            } else {
+              ListItem() {
+                this.ListItemContent()
+              }
+              .width("100%")
+              .height(175)
+              .backgroundColor("#F8F9FA")
+              .borderRadius(12)
+              .border({ width: 1, color: "#EEEEEE" })
+              .margin({ bottom: idx + 1 == 3 ? 0 : 15 })
+              .padding(16)
+            }
+          })
+        }.width("100%").height("100%").padding({ left: 16, right: 16 }).scrollBar(BarState.Off)
+      }.width("100%").layoutWeight(1).onRefreshing(() => {
+        this.vm.onRefresh()
+      })
+    }
+    .width("100%")
+    .height("100%")
+    .clip(false)
+    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
+  }
+
+  /**
+   * 顶部状态栏
+   */
+  @Builder
+  TopBar() {
+    Column() {
+      Row() {
+        Text("我的作业")
+          .fontSize(18)
+          .fontColor(Color.White)
+          .fontWeight(FontWeight.Medium)
+          .height(36)
+          .layoutWeight(1)
+
+        Stack() {
+          Image($r("app.media.add")).width(20).height(20).fillColor(Color.White)
+        }.width(36).height(24).onClick(() => {
+        })
+      }
+      .width("100%")
+      .padding({
+        left: 16,
+        top: 15,
+        right: 16,
+        bottom: 15
+      })
+    }
+    .width("100%")
+    .backgroundColor("#FFA500")
+    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
+  }
+
+  @Builder
+  ListItemTitle(title: string) {
+    Text(title).fontColor("#333333").fontSize(16).height(45)
+  }
+
+  @Builder
+  ListItemContent() {
+    Column() {
+      Row() {
+        Text("冷却水系统能量隔离作业").fontSize(15).fontColor("#333333").fontWeight(FontWeight.Medium)
+        Row().layoutWeight(1)
+        Text("待办")
+          .fontSize(12)
+          .fontColor("#333333")
+          .backgroundColor("#FFD700")
+          .borderRadius(20)
+          .height(24)
+          .padding({ left: 10, right: 10 })
+          .textAlign(TextAlign.Center)
+      }
+
+      Flex({ wrap: FlexWrap.Wrap, alignItems: ItemAlign.Center, direction: FlexDirection.Row }) {
+        Image($r("app.media.location")).width(12).height(12).fillColor("#1E90FF").margin({ right: 5 })
+        Text("车间B区")
+          .fontSize(13)
+          .fontColor("#666666")
+          .margin({ right: 12 })
+          .height(24)
+          .textAlign(TextAlign.Center)
+        Image($r("app.media.user")).width(12).height(12).fillColor("#666666").margin({ right: 5 })
+        Text("负责人：王主管哈哈哈哈")
+          .fontSize(13)
+          .fontColor("#666666")
+          .margin({ right: 12 })
+          .height(24)
+          .textAlign(TextAlign.Center)
+        Image($r("app.media.jobs")).width(12).height(12).fillColor("#666666").margin({ right: 5 })
+        Text("WO-2025-005")
+          .fontSize(13)
+          .fontColor("#666666")
+          .margin({ right: 12 })
+          .height(24)
+          .textAlign(TextAlign.Center)
+      }.margin({ top: 10 })
+
+      Text("作业内容：上锁挂牌").fontSize(13).fontColor("#666666").height(24).textAlign(TextAlign.Center)
+
+      Row() {
+        Text("今天 14:00").layoutWeight(1).margin({ right: 10 }).fontColor("#999999").fontSize(12)
+        Button("查看详情")
+          .height(35)
+          .padding({ left: 15, right: 15 })
+          .backgroundColor("#4682B4")
+          .borderRadius(4)
+          .fontSize(13)
+          .fontWeight(FontWeight.Medium)
+      }.width("100%").layoutWeight(1)
+    }.width("100%").height("100%").justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start)
   }
 }

entry/src/main/ets/pages/PageHomeComponents/TabMessage.ets

@@ -1,6 +1,110 @@
+import { VMTabMessage } from '../../vm/VMTabMessage'
+
 @Component
 export struct TabMessage {
+  @State vm: VMTabMessage = new VMTabMessage()
+
   build() {
-    Text("我是消息")
+    Column() {
+      this.TopBar()
+      Refresh({ refreshing: $$this.vm.isRefreshing }) {
+        List() {
+          ForEach(["今天", 2, 3, "昨天", 5, 6, 7, 8], (item: object, idx: number) => {
+            if (idx == 0 || idx == 3) {
+              ListItem() {
+                this.ListItemTitle(item.toString())
+              }
+            } else {
+              ListItem() {
+                this.ListItemContent()
+              }
+              .width("100%")
+              .height(122)
+              .backgroundColor("#F8F9FA")
+              .borderRadius(12)
+              .border({ width: 1, color: "#EEEEEE" })
+              .margin({ bottom: idx + 1 == 3 ? 0 : 15 })
+              .padding(16)
+            }
+          })
+        }.width("100%").height("100%").padding({ left: 16, right: 16 }).scrollBar(BarState.Off)
+      }.width("100%").layoutWeight(1).onRefreshing(() => {
+        this.vm.onRefresh()
+      })
+    }
+    .width("100%")
+    .height("100%")
+    .clip(false)
+    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
+  }
+
+  /**
+   * 顶部状态栏
+   */
+  @Builder
+  TopBar() {
+    Column() {
+      Row() {
+        Text("消息中心")
+          .fontSize(18)
+          .fontColor(Color.White)
+          .fontWeight(FontWeight.Medium)
+          .height(36)
+          .layoutWeight(1)
+
+        Stack() {
+          Image($r("app.media.all_read")).width(20).height(20).fillColor(Color.White).objectFit(ImageFit.Auto)
+        }.width(36).height(24).onClick(() => {
+        })
+
+        Stack() {
+          Image($r("app.media.delete")).width(18).height(18).fillColor(Color.White)
+        }.width(36).height(24).onClick(() => {
+        })
+      }
+      .width("100%")
+      .padding({
+        left: 16,
+        top: 15,
+        right: 16,
+        bottom: 15
+      })
+    }
+    .width("100%")
+    .backgroundColor("#FFA500")
+    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
+  }
+
+  @Builder
+  ListItemTitle(title: string) {
+    Text(title).fontColor("#333333").fontSize(16).height(45)
+  }
+
+  @Builder
+  ListItemContent() {
+    Row() {
+      Stack() {
+        Image($r("app.media.jobs")).fillColor(Color.White)
+      }
+      .width(40)
+      .height(40)
+      .padding(12)
+      .borderRadius("50%")
+      .backgroundColor("#1E90FF")
+      .alignSelf(ItemAlign.Start)
+      .clip(false)
+
+      Column() {
+        Text("新任务分配").fontSize(15).fontColor("#333333").fontWeight(FontWeight.Medium).margin({ bottom: 10 })
+        Text("您有新的作业任务待处理，作业票号：WO-2025-003").fontSize(13).fontColor("#666666").lineHeight(18)
+        Row().layoutWeight(1)
+        Row() {
+          Text("09:45").layoutWeight(1).fontSize(12).fontColor("#999999")
+          Text("作业管理").fontSize(12).fontColor("#999999")
+        }
+      }.layoutWeight(1).height("100%").padding({ left: 15, right: 10 }).alignItems(HorizontalAlign.Start)
+
+      Row().width(8).height(8).backgroundColor("#FF4500").borderRadius("50%")
+    }.width("100%").height("100%")
   }
 }

entry/src/main/ets/pages/PageLogin.ets

@@ -119,30 +119,35 @@ struct PageLogin {
           }.alignContent(Alignment.Center).margin({ top: 20 })
 
           Row() {
-            Image($r("app.media.fingerprint"))
-              .width(50)
-              .height(50)
-              .padding(12)
-              .backgroundColor("#F5F5F5")
-              .borderRadius("50%")
-              .fillColor("#333333")
-              .margin({ left: 10, right: 10 })
-            Image($r("app.media.qrcode"))
-              .width(50)
-              .height(50)
-              .padding(12)
-              .backgroundColor("#F5F5F5")
-              .borderRadius("50%")
-              .fillColor("#333333")
-              .margin({ left: 10, right: 10 })
-            Image($r("app.media.bluetooth"))
-              .width(50)
-              .height(50)
-              .padding(14)
-              .backgroundColor("#F5F5F5")
-              .borderRadius("50%")
-              .fillColor("#333333")
-              .margin({ left: 10, right: 10 })
+            Stack() {
+              Image($r("app.media.fingerprint")).fillColor("#333333")
+            }
+            .width(50)
+            .height(50)
+            .padding(12)
+            .backgroundColor("#F5F5F5")
+            .borderRadius("50%")
+            .margin({ left: 10, right: 10 })
+
+            Stack() {
+              Image($r("app.media.qrcode")).fillColor("#333333")
+            }
+            .width(50)
+            .height(50)
+            .padding(12)
+            .backgroundColor("#F5F5F5")
+            .borderRadius("50%")
+            .margin({ left: 10, right: 10 })
+
+            Stack() {
+              Image($r("app.media.bluetooth")).fillColor("#333333")
+            }
+            .width(50)
+            .height(50)
+            .padding(14)
+            .backgroundColor("#F5F5F5")
+            .borderRadius("50%")
+            .margin({ left: 10, right: 10 })
           }
           .width("100%")
           .justifyContent(FlexAlign.Center)

entry/src/main/ets/utils/Storage.ets

@@ -3,15 +3,19 @@ import preferences from '@ohos.data.preferences';
 import common from '@ohos.app.ability.common';
 
 export class Storage {
-  private static prefs: preferences.Preferences;
+  // 操作对象
+  private static instance: preferences.Preferences;
 
-  static async init(context: common.UIAbilityContext) {
-    if (!Storage.prefs) {
-      try {
-        Storage.prefs = await preferences.getPreferences(context, 'app_prefs');
-      } catch (error) {
-
-      }
+  /**
+   * 初始化轻量级存储工具
+   *
+   * @param context
+   */
+  static init(context: common.UIAbilityContext) {
+    try {
+      Storage.instance = preferences.getPreferencesSync(context, { name: 'app_kv_data' })
+    } catch (error) {
+      console.log("Storage", "init() failed", error)
     }
   }
 
@@ -19,11 +23,12 @@ export class Storage {
    * 设置当前登录状态
    * @param value
    */
-  static async setLogin(value: boolean) {
+  static setLogin(value: boolean) {
     try {
-      Storage.prefs.put("is_login", value).catch()
-      await Storage.prefs.flush()
-    } catch (e) {
+      Storage.instance.putSync("is_login", value)
+      Storage.instance.flushSync()
+    } catch (error) {
+      console.log("Storage", "setLogin() failed", error)
     }
   }
 
@@ -34,40 +39,65 @@ export class Storage {
    */
   static isLogin(): boolean {
     try {
-      return Storage.prefs.getSync('is_login', false) === true
+      return Storage.instance.getSync('is_login', false) === true
     } catch (error) {
+      console.log("Storage", "isLogin() failed", error)
       return false
     }
   }
 
-  static async setToken(value: string) {
+  /**
+   * 将登录的token存储到本地
+   *
+   * @param value
+   */
+  static setToken(value: string) {
     try {
-      Storage.prefs.put("token", value).catch()
-      await Storage.prefs.flush()
-    } catch (e) {
+      Storage.instance.putSync("token", value)
+      Storage.instance.flushSync()
+    } catch (error) {
+      console.log("Storage", "setToken() failed", error)
     }
   }
 
+  /**
+   * 获取存储本地的Token
+   *
+   * @returns
+   */
   static getToken(): string {
     try {
-      return Storage.prefs.getSync('token', "") as string
+      return Storage.instance.getSync('token', "") as string
     } catch (error) {
+      console.log("Storage", "getToken() failed", error)
       return ""
     }
   }
 
-  static async setUsername(value: string) {
+  /**
+   * 将用户名存储到本地
+   *
+   * @param value
+   */
+  static setUsername(value: string) {
     try {
-      Storage.prefs.put("username", value).catch()
-      await Storage.prefs.flush()
-    } catch (e) {
+      Storage.instance.putSync("username", value)
+      Storage.instance.flushSync()
+    } catch (error) {
+      console.log("Storage", "setUsername() failed", error)
     }
   }
 
+  /**
+   * 获取用户名
+   *
+   * @returns
+   */
   static getUsername(): string {
     try {
-      return Storage.prefs.getSync('username', "") as string
+      return Storage.instance.getSync('username', "") as string
     } catch (error) {
+      console.log("Storage", "getUsername() failed", error)
       return ""
     }
   }

entry/src/main/ets/vm/VMHomeTab.ets → entry/src/main/ets/vm/VMTabHome.ets

@@ -1,7 +1,7 @@
 import { Storage } from '../utils/Storage'
 
 @Observed
-export class VMHomeTab {
+export class VMTabHome {
   // 顶部用户名
   username: string = ""
   // 是否刷新中

entry/src/main/ets/vm/VMTabJobs.ets

@@ -0,0 +1,11 @@
+@Observed
+export class VMTabJobs {
+  isRefreshing: boolean = false
+
+  onRefresh() {
+    this.isRefreshing = true
+    setTimeout(() => {
+      this.isRefreshing = false
+    }, 3000)
+  }
+}

entry/src/main/ets/vm/VMTabMessage.ets

@@ -0,0 +1,11 @@
+@Observed
+export class VMTabMessage {
+  isRefreshing: boolean = false
+
+  onRefresh() {
+    this.isRefreshing = true
+    setTimeout(() => {
+      this.isRefreshing = false
+    }, 3000)
+  }
+}

entry/src/main/resources/base/media/add.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1765502441498" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5624" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M535.841957 63.337723c-243.71778 0-442.882408 199.405456-442.882409 442.882409s199.405456 442.882408 442.882409 442.882408 442.882408-199.405456 442.882408-442.882408S779.559737 63.337723 535.841957 63.337723z m177.249294 487.194732h-132.936971v132.936971c0 26.491063-17.821261 44.312324-44.312323 44.312324s-44.312324-17.821261-44.312324-44.312324v-132.936971h-132.936971c-26.491063 0-44.312324-17.821261-44.312323-44.312323s17.821261-44.312324 44.312323-44.312324h132.936971v-132.936971c0-26.491063 17.821261-44.312324 44.312324-44.312323s44.312324 17.821261 44.312323 44.312323v132.936971h132.936971c26.491063 0 44.312324 17.821261 44.312324 44.312324s-17.821261 44.312324-44.312324 44.312323z m0 0" fill="#2c2c2c" p-id="5625"></path></svg>

entry/src/main/resources/base/media/all_read.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1765425296928" class="icon" viewBox="0 0 1280 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="83682" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="32"><path d="M896.64 0A270.912 270.912 0 0 0 832 176c0 39.936 8.576 77.824 24.064 112H160a32 32 0 0 0 0 64h736.64A271.36 271.36 0 0 0 1152 443.776L1152 640a192 192 0 0 1-192 192h-268.864l-87.68 146.24a32 32 0 0 1-6.72 7.936l-4.288 3.072a32 32 0 0 1-43.904-11.008L460.8 832 192 832a192 192 0 0 1-192-192V192a192 192 0 0 1 192-192h704.64zM544 512h-384a32 32 0 0 0 0 64h384a32 32 0 0 0 0-64zM1104 16a160 160 0 1 1 0 320 160 160 0 0 1 0-320z" p-id="83683"></path></svg>

entry/src/main/resources/base/media/delete.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1765425353445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="84673" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M736 128l-32-64H320l-32 64H128v128h768V128H736zM192 896a64 64 0 0 0 64 64h512a64 64 0 0 0 64-64V320H192z" fill="#231815" p-id="84674"></path></svg>