HarmonyOS 如何给windows添加全局水印并通过appstorage设置内容和管理开关？

<!-- Watermark.hml -->
@entry
<div if="{{showWatermark}}" class="watermark-container">
    <text>{{watermarkText}}</text>
</div>

/* Watermark.hss */
.watermark-container {
    position: fixed;
    top: 10px;
    left: 10px;
    opacity: 0.5;
    color: #888;
    font-size: 20px;
    z-index: 1000;
}

// Watermark.js
import app from '@system.app';

export default {
    data: {
        showWatermark: false,
        watermarkText: ''
    },
    onInit() {
        // 从 AppStorage 获取水印显示状态和内容
        this.showWatermark = app.storage.getOrDefault('showWatermark', false);
        this.watermarkText = app.storage.getOrDefault('watermarkText', 'Sample Watermark');
        
        // 监听 AppStorage 的变化
        app.storage.on('showWatermark', (value) => {
            this.showWatermark = value;
        });

        app.storage.on('watermarkText', (value) => {
            this.watermarkText = value;
        });
    }
}

// Example of setting AppStorage values
import app from '@system.app';

// 初始化时设置默认值
app.storage.set('showWatermark', false);
app.storage.set('watermarkText', 'Confidential');

// 可以在设置页面中提供选项来更新这些值
function toggleWatermark() {
    let currentStatus = app.storage.get('showWatermark');
    app.storage.set('showWatermark', !currentStatus);
}

function updateWatermarkText(newText) {
    app.storage.set('watermarkText', newText);
}

<!-- MainPage.hml -->
<component src="@resources/Watermark"></component>

<div>
    <!-- 其他页面内容 -->
    <button onclick="toggleWatermark()">Toggle Watermark</button>
    <input placeholder="Enter Watermark Text" onblur="updateWatermarkText($event.value)" />
</div>

@Entry  
@Component  
export struct WaterMarkComponent {  
  build() {  
    Column({ space: 10 }) {  
      Text('TestMark')  
      .fontSize(50)  
        .fontColor(Color.Gray)  
    }  
    .width('100%')  
    .height('100%')  
    .backgroundColor("#51aaaaaa")  
      .justifyContent(FlexAlign.Center)  
  }  
}  
  
@Builder  
export function createWaterMark() {  
  WaterMarkComponent()  
    .hitTestBehavior(HitTestMode.None) // 必须设置其触摸测试为None或Transparent，否则正常组件无法响应事件  
}

@Builder  
export function createWaterMark() {  
  WaterMarkComponent()  
    .hitTestBehavior(HitTestMode.None) // 必须设置其触摸测试为None或Transparent，否则正常组件无法响应事件  
}

import { promptAction } from ‘@kit.ArkUI’  
import { createWaterMark } from ‘…/components/watermark’;  
  
@Entry  
@Component  
struct TestMarkDemo {  
  build() {  
    Row() {  
      Column() {  
        Text(“click”)  
        .fontSize(50)  
          .fontWeight(FontWeight.Bold)  
          .onClick(() => { // 测试对正常事件的响应  
            promptAction.showToast({ message: "test" })  
          })  
      }  
      .width('100%')  
    }  
    .height('100%')  
    .overlay(createWaterMark())  
  }  
}